Блог

Chart.js 2 больше не возвращает проценты для элементов легенды в круговых диаграммах.

Я сохраняю легенду в отдельном элементе в моем html с именем #legend . Затем я установил для него innerHTML значение myPieChart.generateLegend() . Он возвращает как цвет, так и имя, но я хотел бы иметь возможность переопределить этот HTML-шаблон, чтобы также возвращать проценты, чтобы результат выглядел как:

• A
• B
• C

Для:

• A (13%)
• B (50%)
• C (37%)

Раньше я делал это с legendTemplate аргументом, но, похоже, он больше не работает:

 legendTemplate: "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i  ){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%> (<%=segments[i].value%>%)<%}%></li><%}%></ul>"
 

Chart.js v2 имеет совершенно другой API, чем более ранние версии. Вы должны внимательно прочитать новую документацию перед обновлением (а затем задаться вопросом, что не так).

Фундаментальные изменения (связанные с вашим вопросом):

• legendTemplate и segments больше не доступны. Вместо этого вы должны использовать legendCallback (in options ) для переопределения реализации легенды по умолчанию. Вот что говорится в документации об этом обратном вызове:

Функция для создания легенды. Получает объект диаграммы для создания легенды. Реализация по умолчанию возвращает строку HTML.

• Данные, которые вы использовали, segments доступны в chart параметре (т. Е. В вашем фактическом объекте диаграммы) вашей legendCallback функции здесь: chart.data.datasets[0].data .
• Теперь, когда мы знаем, откуда брать необходимые данные, мы можем выполнить цикл, chart.data.datasets[0].data чтобы собрать значения и добавить их в HTML-строку легенды.
• Тогда мы можем просто вызвать myPieChart.generateLegend() , который вызовет наш legendCallback .

Полный пример:

 var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: d,
    options: {
        responsive: true,
        maintainAspectRatio: false,
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return data.labels[tooltipItem.index]   ' ('   data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]   '%)';
                }
            }
        },
        legendCallback: function (chart) {
            var text = [];
            text.push('<ul class="'   chart.id   '-legend">');

            var data = chart.data;
            var datasets = data.datasets;
            var labels = data.labels;

            if (datasets.length) {
                for (var i = 0; i < datasets[0].data.length;   i) {
                    text.push('<li><span style="background-color:'   datasets[0].backgroundColor[i]   '"></span>');
                    if (labels[i]) {
                        text.push(labels[i]   ' ('   datasets[0].data[i]   '%)');
                    }
                    text.push('</li>');
                }
            }
            text.push('</ul>');
            return text.join('');
        },
        legend: {
            // since you're providing your own legend
            display: false,
        },                
    }
});

var legend = myPieChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
 

Для полноты картины я также добавил тот же TEXT (PERCENTAGE%) шаблон в метки всплывающих подсказок (которые, как и легенды, предоставляют свои собственные обратные вызовы для переопределения реализаций по умолчанию).

Я бы также предложил просмотреть фактические Chart.js исходный код, в частности, взглянув на legendCallBack , generateLegend() , и т.д., чтобы лучше понять, как все работает под капотом.