javascript - 如何在 chart.js (chartjs.org) 中为所有图表类型添加标签/图例？

Question

chart.js 的文档提到了“图例模板”，但没有提供此类图例的资源或示例。这些如何显示？

Answer 1

您可以在图表选项中包含图例模板:

//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 以使其看起来不错。