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

希望上面的函数在PieChart的底部显示所有Label值，而Total则在底部，但它仅显示第一个数据集的单个值和第二个数据集的单个值+ Total。

单个等级显示为“未定义”。

这是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

label函数中的label变量需要一个数组索引。

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

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

ChartJS：显示带有总计的多饼图图表的所有工具提示

2 个答案: