javascript - ChartJS : Show all tooltips with Total for Multi Pie chart

Question

我有一个带有多个圆环的饼图，并使用以下代码创建了一个自定义工具提示函数:

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];
}
}

上述函数预计会显示饼图中底部带有总计的所有标签值，但它仅显示第一个数据集中的单个值和第二个数据集中的单个值 + 总计。

各个标签显示为未定义。

这是 JSfille https://jsfiddle.net/kingBethal/x03w2qbk/40/

Answer 1

要查看每个标签，请删除 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;
},

https://jsfiddle.net/drillep/xb4g19en/2/