Javascript 如何使用chart.js v1将彩色图例框添加到饼图中？

我正在尝试使用chart.js v1将图例框添加到饼图中

这是我的HTML代码：

<div id="TheLegendOfDeviceChart"></div>
<canvas id="deviceChart" style="height:250px"></canvas>

这是我的Javascript代码：

var pieChartCanvas = $("#deviceChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
                {
                    value: 700,
                    color: "#f56954",
                    highlight: "#f56954",
                    label: "Chrome"
                },
                {
                    value: 500,
                    color: "#00a65a",
                    highlight: "#00a65a",
                    label: "IE"
                },
                // other values
            ];
var pieOptions = {
     // some options
     legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
     };

var pie = pieChart.Pie(PieData, pieOptions);
document.getElementById('TheLegendOfDeviceChart').innerHTML = pie.generateLegend();

var-pieChartCanvas=$（“#deviceChart”）.get（0.getContext（“2d”）；
var pieChart=新图表（pieChartCanvas）；
变量数据=[
{
价值：700，
颜色：“f56954”，
亮点：“f56954”，
标签：“铬”
},
{
价值：500，
颜色：“00a65a”，
亮点：“00a65a”，
标签：“IE”
},
//其他价值观
];
变量选项={
//一些选择
legendTemplate:“
”，
};
var pie=pieChart.pie（PieData，pieOptions）；
document.getElementById（'TheLegendOfDeviceChart'）.innerHTML=pie.generateLegend（）；

这就是我得到的：

但我想要一个这样的彩色图例框：

---

如何修改我的legendTemplate以获得此信息？

您必须使用Chart.js 2.0才能获得所需的图例。您希望使用1.0的原因是什么？它不再受支持，最后一个版本是2016年4月5日

我强烈建议您切换到2.0，这样您就可以轻松地利用新的传奇

如果出于任何原因，您不能使用2.0，并且必须坚持使用1.0，那么您需要更正

legendTemplate

属性。根据您提供的小提琴，您的小提琴是：

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

区别在于

包含数据集标签（因此正确显示彩色背景）。然而，即使是这种默认情况看起来也很糟糕

---

幸运的是，这只是标准的HTML和CSS，因此您可以按照自己认为合适的方式设置图例的样式。我建议您创建一个您喜欢的HTML图例，让他们将其转换为字符串并添加必要的chart.js模板表达式（例如，

它不起作用。这是我的JSFIDLE:@EstevaoLuis感谢您提供小提琴。我更新了我的答案，以指导您构建所需的模板。请务必通读它并签出我的示例代码笔。非常感谢！它现在起作用了。我删除了li标记中的
clear:both；
样式，以便获得更好的效果。）水平图例列表
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"

.indicator_box {
  width: 55px;
  height: 5px;
  padding: 5px;
  margin: 5px 10px 5px 10px;
  padding-left: 5px;
  display: block;
  float: left;
}

"<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li style=\"float: left; clear: both;\"><div class=\"indicator_box\" style=\"background-color:<%=segments[i].fillColor%>\"></div><span style=\"font-size: 20px;\"><%if(segments[i].label){%><%=segments[i].label%><%}%></span></li><%}%></ul>"