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

Question

I am trying to add a legend box to a pie chart with Chart.js v1.

This is my HTML code:

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

And this is my Javascript code:

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();

This is what I get:

A pie chart with a monochromatic legend

But I would like to have a coloured legend box like this: http://www.chartjs.org/docs/#doughnut-pie-chart-introduction

How can I modify my legendTemplate to get this?

Answer 1

You will have to use Chart.js 2.0 to get the legend that you desire. What is the reason you are wanting to use 1.0? It is no longer supported and the last release was Apr 5, 2016.

I highly recommend switching to 2.0 and then you can easily take advantage of the new legends.

If for whatever reason you cannot use 2.0 and must stick to 1.0, then you need to correct your legendTemplate property. Based on the fiddle you provided yours is:

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

It's hard to tell since its a long string, but this HTML template results in an empty <span> which should otherwise contain your dataset label. Remember, an empty span will not render anything even if it has a background color defined. Here is the resulting legend HTML once its rendered to demonstrate what I mean.

Per the Chart.js v1 docs , the correct legendTemplate string should be.

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

The difference being that the <span> contains the dataset label (and therefore displays correctly with colored background). However, even this default looks pretty bad.

Fortunately, this is just standard HTML and CSS so you can style your legend however you see fit. I would recommend you create a legend in HTML that you like, them convert it to a string and add in the necessary chart.js template expressions (eg <% for (var i=0; i<segments.length; i++){% , <%=segments[i].fillColor%> , etc).

Here is a codepen example using a quick legend template that I came up with that looks pretty close to the Chart.js v2 template. For completeness, I've also provided the key parts below.

css:

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

Template String:

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