javascript - ChartJS：在饼图的工具提示中显示隐藏数据的百分比

Question

我有一个带有多个环的饼图，如下所示：

下面是生成带有隐藏数据的上述图表的代码label: "Target"：

 var data = [{
        labels: ["India", "US", "China", "Canada"],
        data: [55, 60, 75, 50],
        label: "Target",
        hidden: true
    }, {
        labels: ["India", "US", "China", "Canada"],
        data: [30, 32, 38, 45],
        backgroundColor: [
            "#4b77a9",
            "#5f255f",
            "#d21243",
            "#B27200"
        ],
        borderColor: "#fff",
        label: "Achieved"
             }, {
        labels: ["Arrivals", "Departure"],
        data: [8, 13],
        backgroundColor: [
            "#92d400",
            "#bbb"
        ],
        borderColor: "#fff"
    }];

我正在使用以下代码显示工具提示：

 tooltips: {
   callbacks: {
   label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].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 + '%)', "Total : " + totally];
} else {
    return [label + " : " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)', "Total : " + totally];
    }
}
        }
    }

使用上面的工具提示代码，我可以显示每个值的总和的百分比。但是，我想实现两件事：

1) 在第一个环中，显示目标label: "Target",hidden: true与已实现的百分比label: "Achieved"。工具提示中的百分比值为 [印度：54.54%，美国：53.33%，中国：50.66%，加拿大：90%]

2) 在第二个环中，不要显示任何百分比和总计。

这是 JSFiddle ( https://jsfiddle.net/kingBethal/9hj024wy/7/ )

标签： javascriptchartschart.jspercentage