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

Posted 2023-02-16

【中文标题】如何使用 Chart.js v1 在饼图中添加彩色图例框？

【英文标题】：How to add a coloured legend box to a pie chart with Chart.js v1?

【发布时间】：2017-07-24 12:52:54

【问题描述】：

我正在尝试使用 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 来获得这个？

【参考方案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>"

【讨论】：

它不起作用。这是我的 jsfiddle：jsfiddle.net/vrwjfg9z/3649

@EstevaoLuis 感谢您提供小提琴。我更新了我的答案，以指导您构建您想要的模板。请务必通读并查看我的示例代码笔。

非常感谢！它现在正在工作。我删除了 li 标签中的clear: both; 样式，以便有一个水平图例列表