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颜色，空跨度也不会呈现任何内容。这是生成的图例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>"

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

1 个答案: