ChartJS: Показать все всплывающие подсказки с помощью Total for Multi Pie chart - PullRequest
Новая
       5

ChartJS: Показать все всплывающие подсказки с помощью Total for Multi Pie chart

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

У меня есть круговая диаграмма с несколькими кольцами и я создал функцию пользовательских всплывающих подсказок с кодом ниже: 

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, но она показывает только отдельные значения из первого набора данных и отдельные значения + итого из второго набора данных.

Отдельные отметки отображаются как неопределенные.

Вот JSfille https://jsfiddle.net/kingBethal/x03w2qbk/40/

Ответы [ 2 ]

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

Чтобы увидеть каждую метку, удалите 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/

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

Для переменной метки в функции метки необходим индекс массива. 

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

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

...