我试图得到一个stackedBar的所有值的总和,并在工具提示中包含这个总和。
注意:我的数据集不是静态的,这只是一个示例
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Corporation 1',
backgroundColor: "rgba(220,220,220,0.5)",
data: [50, 40, 23, 45, 67, 78, 23]
}, {
label: 'Corporation 2',
backgroundColor: "rgba(151,187,205,0.5)",
data: [50, 40, 78, 23, 23, 45, 67]
}, {
label: 'Corporation 3',
backgroundColor: "rgba(151,187,205,0.5)",
data: [50, 67, 78, 23, 40, 23, 55]
}]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title:{
display:true,
text:"Chart.js Bar Chart - Stacked"
},
tooltips: {
mode: 'label',
callbacks: {
label: function(tooltipItem, data) {
var corporation = data.datasets[tooltipItem.datasetIndex].label;
var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
return total+"--"+ corporation +": $" + valor.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
}
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
现在total
是每个数据集的总和,我需要每个stackedBar的总和。
范例
标签A:值A
标签B:值B
标签C:值C
总计:A值+B值+C值
有可能得到那个总值吗?
谢谢你,伊达利亚。
8条答案
按热度按时间j2qf4p5b1#
首先,您应该知道,如果您在工具提示的
callback
中返回一个数组而不是单个字符串,它将显示数组中的所有字符串,就好像它们是不同的数据集一样(有关详细信息,请参阅this answer)。所以我稍微编辑了一下你的回拨如下:
您可以看到完整的代码in this jsFiddle,下面是它的结果:
tkqqtvp12#
我修改了tektiv答案,以仅显示活动集的总计,并将其移至工具提示页脚。
sg2wtvxw3#
Gaspar答案的简短版本:
示例:https://jsfiddle.net/g3ba60zc/2/
7rfyedvj4#
在其他答案中,您将替换最后一个数据集,使用此数据集,您无需
附言:是 typescript 。
dddzy1tm5#
@Haider这就是你要找的东西,我也遇到过同样的问题。我已经重用了你的代码,并在它的基础上进行了构建@tektiv
我做了一个小的改变,而不是建设到标签,我已经利用了后体。这删除了关键颜色
afterBody代码:
完整代码位于JSFiddle
Picture demonstration of the finished tooltip
zed5wv106#
使用Chart.js 2.5.0
返回字符串值。要计算正确的和值,必须添加parseFloat语句:
xkftehaa7#
如果你使用的是Chart.js的旧版本,你必须用不同的方法来处理这个问题。我使用的是Chart.js 2.7.2版,这是我处理它的方法:
9fkzdhlc8#
Chart.js自己制作的,非常令人满意的solution:
和代码中其他地方:
对我来说效果很好!