web-dev-qa-db-fra.com

Légende personnalisée avec ChartJS v2.0

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("");
            }
javascriptchart.js
25
Phil

Il existe une fonction legendCallback:

legendCallback _ ​​Fonctionfunction (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(''); 
}
14
Craicerjack

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>

21
Robin Carlo Catacutan

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();  
};
0
Raji

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>

Exemple Codepen

0
Udara Kasun