chart.js | 易学教程

Chart.js stacked bar chart - sorting values in bar by value

阅读更多关于 Chart.js stacked bar chart - sorting values in bar by value

问题 I try to implement a stacked bar chart using Chart.js framework (version 2.7) und faced following problem: single data elements are drawn in each bar in the same order as provided in JSON structure (which is absolutely logical and understandable). I would like to have them sorted: biggest elements at the bottom of the bar, smallest at its top. I suppose it can be accomplished using some plugin customization black magic but can not figure it out. Any help would be appreciated. Example: var

ChartJs, How can I get different color fills between my two datasets in a line graph?

阅读更多关于 ChartJs, How can I get different color fills between my two datasets in a line graph?

问题 Above is a graph I made using ChartJS. I have two datasets. I also have the space between the two datasets filled just like I want it. But I need to get two different colors for the fill. When the Hours dataset is bigger than the Goal dataset, I want the fill to be green, and when the Hours dataset is smaller than Goal, I want it to be red. I'm really hoping there is a way to do this using ChartJS, so that I don't have to recreate this in Canvas. If it matters, this is in Vue.Js. Here is the

generateLegend() Chart.JS V2

阅读更多关于 generateLegend() Chart.JS V2

问题 I´m trying to customize my legend I´m using the .generateLegend() to get the legend in a html way this is what the function gave me console.log(myBarChart.generateLegend()); <ul class="1-legend"><li>SECRETARIA MUNICIPAL DE DESENVOLVIMENTO URBANO </li> <li>SECRETARIA MUNICIPAL DE SAUDE</li> <li>SETOR DE RH</li> <li><

generateLegend() Chart.JS V2

阅读更多关于 generateLegend() Chart.JS V2

ChartJS: How to set fixed Y axis max and min

阅读更多关于 ChartJS: How to set fixed Y axis max and min

问题 I have a line chart which I'm trying to set a fixed max and min values. I have tried the other suggestions found on SO, but it still doesn't work. My chart keeps re-setting the max and min values depending on the incoming data. Here's my current options that I pass to my Line chart: var options = { responsive: true, animation: false }; I tried those settings too: var options = { scales: { animation: false, yAxes: [{ display: true, ticks: { suggestedMin: -1, suggestedMax: 1 } }] } }; Any idea

Chart.js creating a line graph using dates

阅读更多关于 Chart.js creating a line graph using dates

问题 I can't seem to get Chart.js to work with dates. I have tried quite a few different methods: let examChart = document.getElementById("examChart").getContext("2d"); let examLineChart = new Chart(examChart, { type: "line", data: [ { t: new Date("2015-3-15 13:3"), y: 12 }, { t: new Date("2015-3-25 13:2"), y: 21 }, { t: new Date("2015-4-25 14:12"), y: 32 } ], options: { label: "placeholder" } }); And: let examChart = document.getElementById("examChart").getContext("2d"); let examLineChart = new

Is it possible in chartjs to hide certain dataset legends?

阅读更多关于 Is it possible in chartjs to hide certain dataset legends?

问题 Is it possible to only hide certain dataset legends in chartjs? I know it is possible to hide all with options: { legend: { display: false 回答1: Short answer: Yes it is possible. Unfortunately it's not quite as simple as the developers could make it. If you know what the text value of the item being displayed in the legend is, then you can filter that out. After reading through the Chart.js docs I found the section Legend Label Configuration that details a filter function that can be used to

Is it possible in chartjs to hide certain dataset legends?

阅读更多关于 Is it possible in chartjs to hide certain dataset legends?

D3.js 力导向图的显示优化

阅读更多关于 D3.js 力导向图的显示优化

D3.js 作为一个前端，说到可视化除了听过 D3.js 的大名，常见的可视化库还有 ECharts 、 Chart.js ，这两个库功能也很强大，但是有一个共同特点是封装层次高，留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比，D3.js** 的相对来说自由度会高很多，得益于 D3.js **中的 SVG 画图对事件处理器的支持，D3.js 可将任意数据绑定到文档对象模型（DOM）上，也可以直接操作对象模型（DOM）完成 W3C DOM API 相关操作，对于想要展示自己设计图形的开发者，D3.js 绝对是一个不错的选择。 d3-force 力导向图以实现一个关系网来说，d3-force 力导向图是不二的选择。 d3-force 是 D3.js 实现以模拟粒子物理运动的 velocity Verlet 数值积分器的模块，可用来控制粒子和边秩序。在力导向图中，d3-force 中的每个节点都可以看成是一个放电粒子，粒子间存在某种斥力（库仑斥力）。同时，这些粒子间被它们之间的“边”所牵连，从而产生牵引力。而 d3-force 中的粒子在斥力和牵引力的作用下，从随机无序的初态不断发生位移，逐渐趋于平衡有序。整个图只有点 / 边，图形实现样例较少且自定义样式居多。下图就是最简单的关系网图，想要实现自己想要的关系网图，还是动手自己实现一个

Yii2 Chart is not defined

阅读更多关于 Yii2 Chart is not defined

问题 I am trying to show some data on the chart while using Yii2 . I have installed Yii2 Chart JS via the composer. Below is the code is taken from the documentation use practically\chartjs\Chart; Chart::widget([ 'type' => Chart::TYPE_BAR, 'datasets' => [ [ 'data' => [ 'Label 1' => 10, 'Label 2' => 20, 'Label 3' => 30 ] ] ] ]); Now when I refreshed this page I not seeing any chart. But in inspect->console I am getting an error Uncaught ReferenceError: Chart is not defined Update 1 Here is my