Javascript 无法使用ChartJs创建图例

我用的是ChartJs，一切都很好

我现在需要添加一个图例并遇到一个问题！传说从未出现过

我已经看到并可以确认我拥有最新版本（1.0.2版）

我运行了Chrome开发工具，意识到图例没有显示的原因是抛出了一个异常（饼图仍然显示）。错误消息是

未捕获引用错误：未定义数据集

这是我在PieChart中使用的代码

//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放在这里：

$（函数（）{
数据=[
{
价值：300，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“红色”
},
{
价值：50，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“绿色”
}
];
图表选项=[{
//布尔-我们是否应该在每个线段上显示笔划
这是真的，
//字符串-每段笔划的颜色
segmentStrokeColor:#fff“，
//数字-每个线段笔划的宽度
分段行程宽度：2，
//数字-我们从中间剪下的图表百分比
percentageInnerCutout:50，//对于饼图，这是0
//Number-动画步数
动画步骤：100，
//字符串动画效果
动画化：“easeOutBounce”，
//布尔-是否设置圆环旋转的动画
动画片：对，
//布尔值-是否设置从中心缩放圆环的动画
动画缩放：错误，
//字符串-图例模板
legendTemplate:“
”
}];
ctx=$（“#adwordsPieChart”）.get（0.getContext（“2d”）；
var myPieChart=新图表（ctx）.Pie（数据，图表选项）；
var legend=myPieChart.generateLegend（）；
$（'图例'）。追加（图例）；
});    

也许你可以用这个。 我还把你的jsfiddle放在这里：

$（函数（）{
数据=[
{
价值：300，
颜色：#F7464A“，
亮点：“FF5A5E”，
标签：“红色”
},
{
价值：50，
颜色：“46BFBD”，
亮点：“5AD3D1”，
标签：“绿色”
}
];
图表选项=[{
//布尔-我们是否应该在每个线段上显示笔划
这是真的，
//字符串-每段笔划的颜色
segmentStrokeColor:#fff“，
//数字-每个线段笔划的宽度
分段行程宽度：2，
//数字-我们从中间剪下的图表百分比
percentageInnerCutout:50，//对于饼图，这是0
//Number-动画步数
动画步骤：100，
//字符串动画效果
动画化：“easeOutBounce”，
//布尔-是否设置圆环旋转的动画
动画片：对，
//布尔值-是否设置从中心缩放圆环的动画
动画缩放：错误，
//字符串-图例模板
legendTemplate:“
”
}];
ctx=$（“#adwordsPieChart”）.get（0.getContext（“2d”）；
var myPieChart=新图表（ctx）.Pie（数据，图表选项）；
var legend=myPieChart.generateLegend（）；
$（'图例'）。追加（图例）；
});    


问题出在
legendTemplate
中。将所有
数据集
替换为
段

像这样：

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

legendTemplate:“
”

问题出在
legendTemplate
中。将所有
数据集
替换为
段

像这样：

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

legendTemplate:“
”

答案是SethT和PAVOLC回复的组合

查询必须是onload（
$（function（）{javascript code}）；
），我需要使用
段从变量
数据集
更新，答案是SethT和avolc回复的组合

查询必须是onload（
$（function（）{javascript code}）；
），我需要使用
段从变量
数据集
进行更新，这可能过于简单，因为它根本不涉及自定义图例，但是，如果您只是从自定义选项中删除模板，您将获得全局模板

现在我要去弄清楚如何定制它，但这就是它给我展示的东西
 这可能过于简单，因为它根本不涉及自定义图例，但如果您只是从自定义选项中删除模板，您将获得全局模板

现在我要去弄清楚如何定制它，但这就是它给我展示的东西
 @MaxZoom，真的吗？？？你已经投票决定关闭t