J'essaie de créer un modèle de légende personnalisé dans ChartJS v2.0. Dans v1 * de ChartJS, j'ai simplement ajouté une propriété au nouveau constructeur Chart, telle que ...
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>'
Je n'arrive pas à trouver de documentation dans la version 2.0 pour cette option. Est-il encore disponible? Quelqu'un peut-il montrer un exemple de la façon de procéder?
Je vous remercie!
Mise à jour - Code de travail ci-dessous
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("");
}
Il existe une fonction legendCallback
:
legendCallback _ Fonction
function (chart) { }
Fonction pour générer une légende. Reçoit l'objet graphique à partir duquel générer une légende. Défaut l'implémentation retourne une chaîne HTML.
Les détails peuvent être trouvés ici: http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends Par exemple (via - https: // github.com/chartjs/Chart.js/issues/5070)- Le rappel de légende par défaut:
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('');
}
Si vous parcourez ce post et essayez la réponse postée mais que cela ne fonctionne pas, essayez celui-ci:
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's 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("");
},
Puis ajoutez ceci ci-dessous:
document.getElementById('chart-legends').innerHTML = myChart.generateLegend();
Pour créer les légendes. Assurez-vous d'avoir un élément <div id="chart-legends"></div>
Ce code fonctionne pour moi
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();
};
J'espère que cela vous aidera
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>