#javascript #jquery #chart.js #chart.js2
#javascript #jquery #chart.js #диаграмма.js2
Вопрос:
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>"
Комментарии:
1. Пожалуйста, предоставьте контекст и код для вашего вопроса, чтобы другие тоже могли извлечь из него пользу; как вы в настоящее время генерируете текст легенды? Что вы пробовали до сих пор?
2. привет, спасибо за ваш ответ, смотрите Мое обновление
Ответ №1:
Chart.js v2 имеет совершенно другой API, чем более ранние версии. Вы должны внимательно прочитать новую документацию перед обновлением (а затем задаться вопросом, что не так).
Фундаментальные изменения (связанные с вашим вопросом):
legendTemplate
иsegments
больше не доступны. Вместо этого вы должны использоватьlegendCallback
(inoptions
) для переопределения реализации легенды по умолчанию. Вот что говорится в документации об этом обратном вызове:
Функция для создания легенды. Получает объект диаграммы для создания легенды. Реализация по умолчанию возвращает строку 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()
, и т.д., чтобы лучше понять, как все работает под капотом.
Комментарии:
1. это работает!! большое вам спасибо за всю вашу помощь до сих пор!
2. Рад, что смог помочь.