如何解决Chart.js堆叠条形的定制工具提示,用于表示每个堆叠数据
我正在尝试实现自定义的Chart.js工具提示,并被堆积在每个工具栏上的工具栏上显示相同数据的工具栏所卡住。每个堆叠栏的每个工具提示都需要不同的数据。
在下面的图表中,例如对于第2天,栏中的堆栈均显示平均值34。无论如何,它们是否可以位于同一栏中,但是使用我使用的自定义工具提示时它们具有不同的值?例如一个说34,另一个说43
任何对正确方向的帮助或指导将不胜感激。在此先感谢!
https://jsfiddle.net/sabSK/xt5k7gac/2/
Key
var dataBars = {
labels: ["Day 1","Day 2","Day 3","Day 4","Day 5"],datasets: [{
label: "Morning hours",fill: true,backgroundColor: "#dedede",data: [09,11,14,17,19]
},{
label: "Evening hours",backgroundColor: "#dddddd",data: [12,13,18,15,20]
},{
label: "Night hours",backgroundColor: "#f8f8f8",]
};
var dataJason = {
"meth": [{
"avg": 3,"sum": 33
},{
"avg": 34,"sum": 76
},{
"avg": 73,"sum": 56
},{
"avg": 9,"sum": 43
},{
"avg": 11,"sum": 12
}
]
};
var avgDATA = [];
var sumDATA = [];
function techData() {
var jdata = dataJason.meth;
var jl = jdata.length;
for (var i = 0; i < jl; i++) {
avgDATA.push(dataJason.meth[i].avg);
sumDATA.push(dataJason.meth[i].sum);
}
}
function init() {
techData();
var bar = document.getElementById("bar").getContext('2d');
var barChar = new Chart(bar,{
type: 'bar',data: dataBars,options: {
tooltips: {
callbacks: {
beforeLabel: function(tooltipItem,data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
return data.datasets[tooltipItem.datasetIndex].label + ' : ' + dataset.data[tooltipItem.index] + "%";
},label: function(tooltipItem,data) {
var avg = "Avg: " + avgDATA[tooltipItem.index];
return avg;
},afterLabel: function(tooltipItem,data) {
var sum = "Sum: " + sumDATA[tooltipItem.index];
return sum;
}
}
},scales: {
xAxes: [{
stacked: true,beginAtZero: true
}],yAxes: [{
stacked: true
}]
}
}
});
}
window.onload = function() {
init();
};
解决方法
您可以使用label
和footer
tooltip callbacks并从其中的每一个返回string
array
,如下所示:
options: {
tooltips: {
callbacks: {
label: (tooltipItem,data) => data.datasets.map(ds => ds.label + ": " + ds.data[tooltipItem.index] + "%"),footer: tooltipItem => [
"Avg: " + avgDATA[tooltipItem[0].index],"Sum: " + sumDATA[tooltipItem[0].index]
]
}
},...
请查看修改后的代码,并查看其工作方式:
var dataBars = {
labels: ["Day 1","Day 2","Day 3","Day 4","Day 5"],datasets: [{
label: "Morning hours",fill: true,backgroundColor: "#dedede",data: [9,11,14,17,19]
},{
label: "Evening hours",backgroundColor: "#dddddd",data: [12,13,18,15,20]
},{
label: "Night hours",backgroundColor: "#f8f8f8",19]
}
]
};
var dataJason = {
"meth": [
{ "avg": 3,"sum": 33 },{ "avg": 34,"sum": 76 },{ "avg": 73,"sum": 56 },{ "avg": 9,"sum": 43 },{ "avg": 11,"sum": 12 }
]
};
var avgDATA = [];
var sumDATA = [];
function techData() {
var jdata = dataJason.meth;
var jl = jdata.length;
for (var i = 0; i < jl; i++) {
avgDATA.push(dataJason.meth[i].avg);
sumDATA.push(dataJason.meth[i].sum);
}
}
function init() {
techData();
var bar = document.getElementById("bar").getContext('2d');
var barChar = new Chart(bar,{
type: 'bar',data: dataBars,options: {
tooltips: {
callbacks: {
label: (tooltipItem,footer: tooltipItem => [
"Avg: " + avgDATA[tooltipItem[0].index],"Sum: " + sumDATA[tooltipItem[0].index]
]
}
},scales: {
xAxes: [{
stacked: true
}],yAxes: [{
stacked: true
}]
}
}
});
}
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<canvas id="bar" height="120"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。