web-dev-qa-db-ja.com

chart.js（chartjs.org）のすべてのチャートタイプにラベル/凡例を追加するにはどうすればよいですか？

Chart.jsのドキュメントには「凡例テンプレート」が記載されていますが、そのような凡例のリソースや例はありません。これらはどのように表示できますか？

javascriptchart.js
59
Nalin

グラフオプションに凡例テンプレートを含めることができます。

//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);

また、基本的なcssを追加して見た目を良くする必要があります。

58
omgo

  1. 凡例は、ChartJsライブラリのデフォルトオプションの一部です。そのため、オプションとして明示的に追加する必要はありません。

  2. ライブラリはHTMLを生成します。それを単にページに追加するだけです。たとえば、特定のDIVのinnerHTMLに追加します。 （色などを編集している場合は、デフォルトのオプションを編集します）

<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

奇妙なことに、Chart.jsのドキュメントには、凡例とラベルに関する情報は何も見つかりませんでした。 chart.jsだけではできないようです。

https://github.com/bebraw/Chart.js.legend を使用しました。これは非常に軽量で、凡例を生成します。

13
user2909590

折れ線グラフでは、次のコードを使用します。

最初にカスタムスタイルを作成する

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

次に、これを回線オプションに追加します

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();

追加することを忘れないでください

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

あなたのhtmlのどこに伝説を置きたいですか。それでおしまい！

4
Rhaymand Tatlonghari

私はこの質問が古いことを知っています。しかし、これは伝説の問題を抱えている人には役立つかもしれません。 ZaneDarkenによる回答に加えて、chart.jsファイルを変更して、pie chartに凡例を表示しました。これらの行のすぐ上のlegendTemplate（すべてのチャートタイプに対して何度も宣言されています）を変更しました。

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,
      .......

私のlegendTemplateはから変更されます

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