如何使用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>" 

这是困难的，因为它是一个很长的字符串说，但在一个空<span>其中应包含，否则你的数据集的标签这个HTML模板结果。请记住，即使空间跨度为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>"