ChartJS: Показать процент скрытых данных во всплывающей подсказке круговой диаграммы - PullRequest
Новая
       7

ChartJS: Показать процент скрытых данных во всплывающей подсказке круговой диаграммы

0 голосов
/ 28 августа 2018

У меня есть круговая диаграмма с несколькими кольцами: Pie Chart

Ниже код генерирует приведенный выше график со скрытыми данными 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/)

...