ChartJS:显示多饼图的所有工具提示
ChartJS:显示多饼图的所有工具提示
提问于 2018-08-25 02:33:54
我有一个带有多个环的饼图，并用以下代码创建了一个自定义工具提示函数：
function tooltipWithTotalP(tooltipItem, data) {
var label = data.labels[tooltipItem.index];
var values = data.datasets[tooltipItem.datasetIndex].data;
var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
var total = 0;
for (var i in values) {
total += values[i];
}
var percentage = Math.round((value / total) * 100);
var totally = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
return label + " : " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)';
} else {
return [label + " : " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)', "Total : " + totally];
}
}上面的函数应该显示PieChart底部的所有标签值，但它只显示第一个数据集中的单个值和第二个数据集中的单个值+总计。
单个lebels显示为未定义。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-27 17:27:52
要查看每个标签，请删除tooltipItem.index
var label = data.datasets[tooltipItem.datasetIndex].labels;直接列出工具提示中的所有标签。
var label = [];
for (var j in labels) {
var percentage = Math.round((values[j] / total) * 100);
label.push (labels[j] + " : " + values[j].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)');
}
label.push("Total : " + totally)
return label;标签颜色是从datasetIndex派生的，因此标签背景颜色不会传播，您必须创建自定义工具提示或禁用displayColors。
custom: function(tooltip) {
tooltip.displayColors = false;
},Stack Overflow用户
发布于 2018-08-27 08:49:55
label函数中的label变量需要数组索引。
var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52010013
复制相关文章
相似问题