Пользовательская легенда с ChartJS v2.0
Я пытаюсь создать собственный шаблон условных обозначений в ChartJS v2.0. В v1 * ChartJS я просто добавил свойство к новому конструктору диаграммы, например...
legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'
Я не могу найти какую-либо документацию в версии 2.0 для этой опции. Он еще доступен? Может ли кто-нибудь показать пример того, как это сделать?
Спасибо!
Обновление - рабочий код ниже
legendCallback: function(chart) {
console.log(chart.data);
var text = [];
text.push('<ul>');
for (var i=0; i<chart.data.datasets[0].data.length; i++) {
text.push('<li>');
text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>');
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]);
}
text.push('</li>');
}
text.push('</ul>');
return text.join("");
}
Ответы
Ответ 1
Есть функция legendCallback
:
Функция function (chart) { }
legendCallback function (chart) { }
Функция для генерации легенды. Получает объект диаграммы для создания легенды. Реализация по умолчанию возвращает строку HTML.
Подробности можно найти здесь: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends Например (через - https://github.com/chartjs/Chart.js/issues/5070) - обратный вызов легенды по умолчанию:
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {
text.push('<li><span style="background-color:' +
chart.data.datasets[i].backgroundColor +
'"></span>');
if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</li>');
}
text.push('</ul>');
return text.join('');
}
Ответ 2
Если вы, ребята, пробегаете этот пост и пробовали опубликованный ответ и не работали,
попробуйте следующее:
legendCallback: function(chart) {
var text = [];
text.push('<ul>');
for (var i=0; i<chart.data.datasets.length; i++) {
console.log(chart.data.datasets[i]); // see what inside the obj.
text.push('<li>');
text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' + chart.data.datasets[i].label + '</span>');
text.push('</li>');
}
text.push('</ul>');
return text.join("");
},
Затем добавьте это ниже:
document.getElementById('chart-legends').innerHTML = myChart.generateLegend();
Чтобы создать легенды. Убедитесь, что у вас есть элемент <div id="chart-legends"></div>
Ответ 3
Этот код работает для меня
updateDataset = function(target, chart, label, color, data) {
var store = chart.data.datasets[0].label;
var bgcolor = chart.data.datasets[0].backgroundColor;
var dataSets = chart.data.datasets[0].data;
var exists = false;
for (var i = 0; i < chart.data.datasets[0].label.length; i++) {
if (chart.data.datasets[0].label[i] === label) {
chart.data.datasets[0].label
exists = true;
chart.data.datasets[0].label.push(store.splice(i, 1)[0][1]);
chart.data.datasets[0].backgroundColor.push(bgcolor.splice(i, 1)[0][1]);
chart.data.datasets[0].data.push(dataSets.splice(i, 1)[0][1]);
}
}
if (!exists) {
chart.data.datasets[0].label.push(label);
chart.data.datasets[0].backgroundColor.push(color);
chart.data.datasets[0].data.push(data);
exists = false;
}
chart.update();
};
Ответ 4
Я надеюсь, что это поможет вам
var configd = {
type: 'doughnut',
data: {
datasets: [{
data: [
50,
60,
20
],
backgroundColor: [
'#33b35a',
"#ffce56",
"#4bc0c0",
"#CDDC39",
"#9C27B0",
"#fb7145",
"#5971f9"
],
label: 'Energy usage'
}],
labels: [
'E1',
'E2',
'E3'
]
},
options: {
responsive: true,
legend: {
display: false
},
legendCallback: function (chart) {
// Return the HTML string here.
console.log(chart.data.datasets);
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
text.push('<li><span id="legend-' + i + '-item" style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '" onclick="updateDataset(event, ' + '\'' + i + '\'' + ')">');
if (chart.data.labels[i]) {
text.push(chart.data.labels[i]);
}
text.push('</span></li>');
}
text.push('</ul>');
return text.join("");
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
let label = data.datasets[tooltipItem.datasetIndex].label + ' - ' + data.labels[tooltipItem.index];
let datasetLabel = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return label + ': ' + datasetLabel.toLocaleString();
}
}
},
}
};
var ctxd = document.getElementById('canvas').getContext('2d');
window.myDoughnut = new Chart(ctxd, configd);
$("#do_legend").html(window.myDoughnut.generateLegend());
// Show/hide chart by click legend
updateDataset = function (e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.myDoughnut;
var meta = ci.getDatasetMeta(0);
var result= (meta.data[datasetIndex].hidden == true) ? false : true;
if(result==true)
{
meta.data[datasetIndex].hidden = true;
$('#' + e.path[0].id).css("text-decoration", "line-through");
}else{
$('#' + e.path[0].id).css("text-decoration","");
meta.data[datasetIndex].hidden = false;
}
ci.update();
};
#do_legend{
height:62px;
}
#do_legend{
width:100%;
}
#do_legend> ul{
padding: 0;
text-align: center;
}
#do_legend {
width:100%;
bottom:10%;
}
#do_legend li {
cursor: pointer;
margin: 4px 3px;
display: inline-table;
}
#do_legend li span {
position: relative;
padding: 3px 10px;
border-radius: 13px;
color: white;
z-index: 2;
font-size: 11px;
}
#do_legend{
height: 62px;
overflow-y: auto;
}
.donut-area{
height:calc(100% - 62px)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:40%">
<div id="do_legend"></div>
<canvas id="canvas"></canvas>
</div>