javascript - 无法使用 ChartJs 创建图例

Question

我正在使用 ChartJs，一切正常。

我现在需要添加图例并遇到问题!图例从不显示。

我看过How can labels/legends be added for all chart types in chart.js (chartjs.org)?并且可以确认我拥有当前的最新版本(版本 1.0.2)

我运行了 Chrome 开发工具并意识到图例未显示的原因是抛出了异常(饼图仍然显示)。错误信息是

Uncaught ReferenceError: datasets is not defined

这是我用于饼图的代码

//data copied direct from the ChartJs docs
data = [
      {
          value: 300,
          color:"#F7464A",
          highlight: "#FF5A5E",
          label: "Red"
      },
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
}
    ];

    
    ctx = $("#adwordsPieChart").get(0).getContext("2d");
    var myPieChart = new Chart(ctx).Pie(data, chartOptions);
    var legendAdwordsVsOrganic = myPieChart.generateLegend();
    
    document.getElementById("adwordVsOrganicLegend").innerHTML = legendAdwordsVsOrganic;

我检查了同样的问题出现在 IE 和 Chrome 中，确实如此。

我不知道如何解决这个问题。我已按照说明进行操作(我认为)。有什么想法吗？

JSFiddle

Answer 1

问题出在 legendTemplate 中。将所有 datasets 替换为 segments。

像这样:

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

Jsfiddle