ChartJS：显示所有工具提示，用于多饼图的总计

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/

Answer 2

标签函数中的标签变量需要数组索引。

var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];

https://jsfiddle.net/drillep/40htzrdn/