chart.js插件,用于制作瀑布图 [英] chart.js plugin for making waterfall charts
问题描述
我想创建一个chart.js插件来创建瀑布图。
I want to create a chart.js plugin to create waterfall charts.
我刚开始使用chart.js。我正在考虑扩展条形图以创建瀑布图。
I am new to working with chart.js. I was thinking to extend the bar-chart to create a waterfall chart.
条形图控制器中的绘制函数如下:
The draw function in the bar chart controller is as follows:
draw: function(ease) {
var me = this;
var easingDecimal = ease || 1;
helpers.each(me.getMeta().data, function(rectangle, index) {
var d = me.getDataset().data[index];
if (d !== null && d !== undefined && !isNaN(d)) {
rectangle.transition(easingDecimal).draw();
}
}, me);
},
可在此处找到完整的条形图控制器js文件:
https://github.com/chartjs/Chart.js/tree/ master / src / controllers
THe full bar chart controller js file can be found here: https://github.com/chartjs/Chart.js/tree/master/src/controllers
推荐答案
自 Chart.js v2.9.0。,我们可以使用浮动条以轻松创建瀑布图。此后可以使用语法 [min,max]
指定单个条。
Since Chart.js v2.9.0., we can use floating bars to easily create waterfall charts. Individual bars may since be specified with the syntax [min, max]
.
给出值数组 [3、5、4、2、6]
,我们需要生成以下数据(最后一项是总计栏的计算值):
Given an array of values [3, 5, 4, 2, 6]
, we need to produce the following data (last entry being the computed value for the 'Total' bar):
[[0, 3], [3, 8], [8, 12], [12, 14], [14, 20], 20]
剩下的唯一要做的事情就是定义一个 tooltips.callback
函数,该函数计算要在工具提示中显示的正确值。
The only additional thing left to do is defining a tooltips.callback
function that computes the correct value to be shown in the tooltips.
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const v = data.datasets[0].data[tooltipItem.index];
return Array.isArray(v) ? v[1] - v[0] : v;
}
}
},
请看看下面的代码示例从 baseData
数组中生成瀑布图。
Please have a look at the following code sample that produces a waterfall chart out of the baseData
array.
let baseData = [
{ label: 'A', value: 3 },
{ label: 'B', value: 5 },
{ label: 'C', value: 4 },
{ label: 'D', value: 2 },
{ label: 'E', value: 6 }
];
const labels = baseData.map(o => o.label).concat('Total');
const data = [];
let total = 0;
for (let i = 0; i < baseData.length; i++) {
const vStart = total;
total += baseData[i].value;
data.push([vStart, total]);
}
data.push(total);
const backgroundColors = data.map((o, i) => 'rgba(255, 99, 132, ' + (i + (11 - data.length)) * 0.1 + ')');
new Chart('waterfall', {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: backgroundColors,
barPercentage: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
callbacks: {
label: (tooltipItem, data) => {
const v = data.datasets[0].data[tooltipItem.index];
return Array.isArray(v) ? v[1] - v[0] : v;
}
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="waterfall" height="200"></canvas>
如果图表应以总计栏开头,只需 反向
标签
, data
和 backgroundColors
数组如下。
If the chart should start with the 'Total' bar, simply
reverse
labels
,data
andbackgroundColors
arrays as follows.
data: {
labels: labels.reverse(),
datasets: [{
data: data.reverse(),
backgroundColor: backgroundColors.reverse(),
...
这篇关于chart.js插件,用于制作瀑布图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!