如何使用 Chart.js v1 在饼图中添加彩色图例框？

Question

我正在尝试使用 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();

这是我得到的：

A pie chart with a monochromatic legend

但我想要一个这样的彩色图例框： http://www.chartjs.org/docs/#doughnut-pie-chart-introduction

如何修改我的 legendTemplate 来获得这个？

Answer 1

您必须使用 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 模板会生成一个空的 <span>，否则它应该包含您的数据集标签。请记住，即使定义了 background 颜色，空的 span 也不会渲染任何内容。这是渲染后生成的图例 HTML，以证明我的意思。

根据Chart.js v1 docs，正确的legendTemplate 字符串应该是。

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

不同之处在于<span> 包含数据集标签（因此以彩色背景正确显示）。然而，即使这个默认值看起来也很糟糕。

幸运的是，这只是标准的 HTML 和 CSS，因此您可以根据自己的喜好设置图例的样式。我建议您在 HTML 中创建一个您喜欢的图例，然后将其转换为字符串并添加必要的 chart.js 模板表达式（例如<% for (var i=0; i<segments.length; i++){%、<%=segments[i].fillColor%> 等）。

这是一个codepen example，使用我想出的一个快速图例模板，看起来非常接近 Chart.js v2 模板。为了完整起见，我还提供了以下关键部分。

css:

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