如何为chart.js(chartjs.org）中的所有图表类型添加标签/图例

How can labels/legends be added for all chart types in chart.js (chartjs.org)?

本文关键字：类型 添加 图例 加标签 chart js org chartjs      更新时间：2024-04-04

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是做不到的。

我曾经https://github.com/bebraw/Chart.js.legend这是非常轻的，以产生传说。

对于折线图，我使用以下代码。

首先创建自定义样式

.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上，你想把你的图例放在哪里。就是这样！

我知道这个问题已经过时了。但这可能对有传奇问题的人有用。除了ZaneMarken给出的答案之外，我修改了chart.js文件，以便在我的饼图中显示图例。我更改了以下行上方的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>"

相关文章：