web-dev-qa-db-fra.com

Comment ajouter des étiquettes / légendes pour tous les types de graphiques dans chart.js (chartjs.org)?

La documentation de chart.js mentionne des "modèles de légende" mais ne fournit pas de ressources ni d'exemples de telles légendes. Comment peuvent-ils être affichés?

javascriptchart.js
59
Nalin

Vous pouvez inclure un modèle de légende dans les options du graphique:

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = {
  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>'
  }

  //don't forget to pass options in when creating new Chart
  var lineChart = new Chart(element).Line(data, options);

  //then you just need to generate the legend
  var legend = lineChart.generateLegend();

  //and append it to your page somewhere
  $('#chart').append(legend);

Vous devrez également ajouter des CSS de base pour que tout se passe bien.

58
omgo

  1. La légende fait partie des options par défaut de la bibliothèque ChartJs. Vous n'avez donc pas besoin de l'ajouter explicitement en tant qu'option.

  2. La bibliothèque génère le code HTML. Il s’agit simplement d’ajouter cela à votre page. Par exemple, ajoutez-le au innerHTML d'un DIV donné. (Modifiez les options par défaut si vous modifiez les couleurs, etc.)

<div>
    <canvas id="chartDiv" height="400" width="600"></canvas>
    <div id="legendDiv"></div>
</div>

<script>
   var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "The Flash's Speed",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "Superman's Speed",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

    var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data);
    document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend();
</script>
44
ZaneDarken

Bizarrement, je n'ai rien trouvé sur les légendes et les libellés dans la documentation de Chart.js. Il semble que vous ne pouvez pas le faire avec chart.js seul.

J'ai utilisé https://github.com/bebraw/Chart.js.legend qui est extrêmement léger, pour générer les légendes.

13
user2909590

Pour le graphique en courbes, j'utilise les codes suivants.

D'abord créer un style personnalisé

.boxx{
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

Ajoutez ensuite ceci à vos options de ligne

var lineOptions = {
            legendTemplate : '<table>'
                            +'<% for (var i=0; i<datasets.length; i++) { %>'
                            +'<tr><td><div class=\"boxx\" style=\"background-color:<%=datasets[i].fillColor %>\"></div></td>'
                            +'<% if (datasets[i].label) { %><td><%= datasets[i].label %></td><% } %></tr><tr height="5"></tr>'
                            +'<% } %>'
                            +'</table>',
            multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

var ctx = document.getElementById("lineChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(lineData, lineOptions);
document.getElementById('legendDiv').innerHTML = myNewChart.generateLegend();

N'oubliez pas d'ajouter

<div id="legendDiv"></div>

sur votre html où voulez-vous placer votre légende. C'est ça!

4
Rhaymand Tatlonghari

Je sais que cette question est ancienne. Mais cela pourrait être utile pour quelqu'un qui a le problème avec la légende. En plus de la réponse donnée par ZaneDarken, j'ai modifié le fichier chart.js pour afficher la légende dans mon diagramme à secteurs. J'ai changé le legendTemplate (qui est déclaré plusieurs fois pour chaque type de graphique) juste au-dessus de ces lignes:

Chart.Type.extend({
      //Passing in a name registers this chart in the Chart namespace
      name: "Doughnut",
      //Providing a defaults will also register the deafults in the chart namespace
      defaults: defaultConfig,
      .......

My legendTemplate a changé de

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

À

legendTemplate: "
<ul class=\ "<%=name.toLowerCase()%>-legend\">
  <% for (var i=0; i<segments.length; i++){%>
    <li><span style=\ "-moz-border-radius:7px 7px 7px 7px; border-radius:7px 7px 7px 7px; margin-right:10px;width:15px;height:15px;display:inline-block;background-color:<%=segments[i].fillColor%>\"> </span>
      <%if(segments[i].label){%>
        <%=s egments[i].label%>
          <%}%>
    </li>
    <%}%>
</ul>"
3
S.KC