IT Share you

chart.js (chartjs.org)의 모든 차트 유형에 레이블 / 범례를 추가하려면 어떻게해야합니까?

shareyou 2020. 12. 7. 21:09
반응형

chart.js (chartjs.org)의 모든 차트 유형에 레이블 / 범례를 추가하려면 어떻게해야합니까?


chart.js에 대한 문서는 "범례 템플릿"을 언급하지만 그러한 범례에 대한 리소스 나 예제를 제공하지 않습니다. 어떻게 표시 할 수 있습니까?


차트 옵션에 범례 템플릿을 포함 할 수 있습니다.

//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를 추가해야합니다.


  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>

이상하게도 Chart.js 문서에서 범례와 레이블에 대해 아무것도 찾지 못했습니다. chart.js만으로는 할 수없는 것 같습니다.

I used https://github.com/bebraw/Chart.js.legend which is extremely light, to generate the legends.


For line chart, I use the following codes.

First create custom style

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

Then add this on your line options

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

Don't forget to add

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

on your html where do you want to place your legend. That's it!


I know this question is old. But this might be useful for someone who is having the problem with legend. In addition to the answer given by ZaneDarken, I modified the chart.js file to show the legend in my pie chart. I changed the legendTemplate(which is declared many times for every chart type) just above these lines :

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 is changed from

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>"

To

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>"

참고URL : https://stackoverflow.com/questions/20397512/how-can-labels-legends-be-added-for-all-chart-types-in-chart-js-chartjs-org

반응형