如何控制 Chart.JS 饼图图例的位置及其外观？
Posted
技术标签:
【中文标题】如何控制 Chart.JS 饼图图例的位置及其外观？【英文标题】：How can I control the placement of my Chart.JS pie chart's legend, as well as its appearance? 【发布时间】：2017-01-25 05:50:11 【问题描述】：我可以通过以下代码使用 Chart.JS 创建饼图：
<div>
<canvas id="top10ItemsChart" style="padding-left:20px" ></canvas>
<div id="top10Legend" class="chart-legend"></div>
</div>
jQuery
var data = [
value: 2755,
color: "#FFE135",
label: "Bananas"
,
value: 2256,
color: "#3B5323",
label: "Lettuce, Romaine"
,
value: 1637,
color: "#fc6c85",
label: "Melons, Watermelon"
,
value: 1608,
color: "#ffec89",
label: "Pineapple"
,
value: 1603,
color: "#021c3d",
label: "Berries"
,
value: 1433,
color: "#3B5323",
label: "Lettuce, Spring Mix"
,
value: 1207,
color: "#046b00",
label: "Broccoli"
,
value: 1076,
color: "#cef45a",
label: "Melons, Honeydew"
,
value: 1056,
color: "#421C52",
label: "Grapes"
,
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe"
];
var optionsPie =
legend:
display: true,
position: 'right',
labels:
fontColor: 'rgb(255, 99, 132)'
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById('top10Legend').innerHTML = top10PieChart.generateLegend();
问题在于它将图例定位到饼图的底部，甚至在我希望饼图限制自身的 div 边界之外溢出和流血：
它还将图例显示为一个简单的无序列表。我想要做的是控制图例中各种元素的颜色（“香蕉”应该与香蕉派（可以这么说）的颜色相同（#FFE135）等）
如何使各个元素与其各自数据点的颜色相匹配？
更新
官方文档here中的“图例标签配置”主题表示可以设置图例的fontColor，但这是针对整个shebang的；我想知道的是，如何控制每个项目的颜色？
更新 2
为了至少让图例显示在所需位置，我将其添加到 jQuery 中：
var optionsPie =
legend:
display: true,
position: 'right',
labels:
fontColor: 'rgb(255, 99, 132)'
. . .
var myPieChart = new Chart(ctx).Pie(data, optionsPie);
document.getElementById("legendDiv").innerHTML = myPieChart.generateLegend();
...不过没什么区别——图例还是挂在饼图的底部，字体还是默认的黑色。
更新 3
我使用了一些建议的代码，但图例仍然是重力输入的，而不是挂在右边：
所以这个图例会影响到它下面的图表，而不是把自己限制在它自己的附近。
另外，我不希望项目符号出现在图例中——彩色方块（和措辞——还有值）就是我所需要的。我怎样才能将图例从馅饼的南边推到馅饼的东边？
更新 4
我已经根据this 重构了代码，它看起来更好（我也向数据数组的“标签”值添加了更多数据）：
尽管如此，您可以看到图例侵犯了它下面的象限。不过，馅饼周围有“吨”的空白/浪费空间-我想将馅饼移到左侧，将图例移到馅饼的右侧。这也将为馅饼的增长提供更多的垂直空间。
我该怎么做？这是我现在使用的代码：
HTML
<div>
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
<div id="top10Legend"></div>
</div>
CSS
.pie-legend
list-style: none;
margin: 0;
padding: 0;
.pie-legend span
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
margin-right: 16px;
margin-bottom: -2px;
.pie-legend li
margin-bottom: 10px;
display: inline-block;
margin-right: 10px;
JQUERY
var data = [
value: 2755,
color: "#FFE135",
label: "Bananas: 2,755 (18%)"
,
. . .
,
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe: 1,048 (7%)"
];
var optionsPie =
responsive: true,
scaleBeginAtZero: true,
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 ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
$("#top10Legend").html(top10PieChart.generateLegend());
注意：将此添加到 optionsPie：
legend:
display: true,
position: 'right'
,
...什么都不做 - 传奇仍然被压在地板上，就像一只被鹌鹑子弹填满下巴的青蛙。
更新 5
我玩过 Teo 的示例，试图让它正常工作，但虽然它更好，但馅饼非常小，图例应该更宽，但我不知道如何拉伸图例水平和各个方向的馅饼。这是它现在的样子：
这是现在的代码（JQUERY 也一样）：
HTML
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="legendTable">
<div class="legendCell">
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
</div>
<div class="legendCell" id="top10Legend">
</div>
</div>
</div>
</div>
CSS
.topleft
margin-top: -4px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border: 1px solid black;
canvas
width: 100% !important;
height: auto !important;
.legendTable
border: 1px solid forestgreen;
display: table;
width: 100%;
table-layout: fixed;
.legendCell
display: table-cell;
vertical-align: middle;
.pie-legend ul
list-style: none;
margin: 0;
padding: 0;
width: 300px;
.pie-legend span
display: inline-block;
width: 14px;
height: 12px;
border-radius: 100%;
margin-right: 4px;
margin-bottom: -2px;
.pie-legend li
margin-bottom: 4px;
display: inline-block;
margin-right: 4px;
有些东西正在挤压馅饼并将图例的外边缘推到一起。
更新 6
Ochi 等人：这是我在代码 Ochification 后看到的内容：
这是我的代码 - 我什至按照你的方式订购了 jQuery，尽管我怀疑这是否真的有必要：
HTML
<div class="row" id="top10Items">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
@*<div class="legendTable">
<div class="legendCell">
<canvas id="top10ItemsChart" class="pie" style="padding-left:20px"></canvas>
</div>
<div class="legendCell" id="top10Legend">
</div>
</div>*@
<div class="chart">
<canvas id="top10ItemsChart" class="pie"></canvas>
<div id="pie_legend"></div>
</div>
</div>
</div>
. . .
</div>
CSS
.pie-legend
list-style: none;
margin: 0;
padding: 0;
.pie-legend span
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
margin-right: 16px;
margin-bottom: -2px;
.pie-legend li
margin-bottom: 10px;
display: block;
margin-right: 10px;
.chart,
#priceComplianceBarChart,
#pie_legend
display: inline-flex;
padding: 0;
margin: 0;
JQUERY
var optionsPie =
responsive: true,
scaleBeginAtZero: true,
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 ctx = $("#top10ItemsChart").get(0).getContext("2d");
var data = [
value: 2755,
color: "#FFE135",
label: "Bananas: 2,755 (18%)"
. . .
,
value: 1048,
color: "#FEA620",
label: "Melons, Cantaloupe: 1,048 (7%)"
];
var top10PieChart = new Chart(ctx).Pie(data, optionsPie);
$("#pie_legend").html(top10PieChart.generateLegend());
...但馅饼比大象身上的弹力裤更有弹性。
更新 7
可能存在配置问题或其他问题。我决定“升级”到 Chart.JS 的 2.1.3 版（从 1.0.2 版开始）：
@*<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>*@
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
...并且几乎完全复制了 Teo Dragovic 的 CodePen here。
我唯一改变的是两个 CSS 类的名称（“table”变成了“legendTable”，“cell”变成了“legendCell”）以及表格边框的颜色从红色变成了森林绿色，我现在得到了这个：
我还需要引用 Chart.JS CSS 文件吗？
【问题讨论】：
如果您有链接到他们演示如何完成此操作的地方，我会很高兴看到它。 对不起，我看到canvas.js，但它是Chart.js...试试Canvas.js 最好。
我不知道您如何获得简单的列表作为标签，您一定是错过了一些要包含的样式吗？猜猜你得在your own上设计它们
我不确定所需的输出，但我将您的小提琴更新为：jsfiddle.net/wprnvyd1/67 - 让我知道这是否接近您正在寻找的内容
奇怪... - 我要出去办事了 - 我回来后会再调查一下 -
【参考方案1】：
我认为这是你想要的：DEMO
首先，您需要通过覆盖固定宽度和高度来使canvas 具有响应性，并将其包装在可用于定位的附加div 中。我使用display: table 将元素居中，但如果您希望图表和图例占用的空间量与 50:50 不同，则将内部 div 设置为 inline-block 也可以。
HTML：
<div class="table">
<div class="cell">
<canvas id="top10ItemsChart" class="pie"></canvas>
</div>
<div class="cell" id="top10Legend"></div>
</div>
CSS：
canvas
width: 100% !important;
height: auto !important;
.table
border: 1px solid red;
display: table;
width: 100%;
table-layout: fixed;
.cell
display: table-cell;
vertical-align: middle;
更新：根据 OP NEW DEMO
提供的其他信息进行了一些调整HTML：
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
<div class="pie">
<canvas id="top10ItemsChart" class="pie"></canvas>
</div>
<div class="legend" id="top10Legend">
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
.topleft
margin-top: -4px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border: 1px solid black;
canvas
width: 100% !important;
height: auto !important;
margin-left: -25%;
.chart
border: 1px solid forestgreen;
width: 100%;
overflow: hidden;
position: relative;
.pie
position: relative;
padding: 10px 0;
// adjust as necessary
padding-left: 10px;
padding-right: 0;
.legend
position: absolute;
right: 10px;
top: 10px;
height: 100%;
// adjust as necessary:
width: 48%;
@media (max-width: 480px)
.legend
position: relative;
width: 100%;
.pie
margin: 0;
.pie-legend ul
list-style: none;
margin: 0;
padding: 0;
width: 300px;
.pie-legend span
display: inline-block;
width: 14px;
height: 12px;
border-radius: 100%;
margin-right: 4px;
margin-bottom: -2px;
.pie-legend li
margin-bottom: 4px;
display: inline-block;
margin-right: 4px;
【讨论】：
Teo，请参阅更新 5。 能否请您包含.topleft 类的CSS 代码？如果我知道周围的环境，调整布局会更容易。
当然 - 我把它放在 Update 5 CSS 的顶部
@B.ClayShannon Chart.js v2.x 的 API 与 1.x 明显不同，请参阅他们的文档以获取数据对象示例。
太棒了，这正是我想要的，但它有一个缺点，默认过滤功能丢失了（您单击图例，它会更改为穿过 css 并且该数据已从图表中删除）。有什么想法可以用这些传说恢复它吗？我在图例上尝试了 onClick 回调方法，但它不适用于这些自定义图例【参考方案2】：
这就是（或多或少）使用 Chart.JS 版本 2 的方法：
HTML
<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
<canvas id="top10ItemsChart" class="pie"></canvas>
<div id="pie_legend"></div>
</div>
JQUERY
var data =
labels: [
"Bananas: 2,755 (18%)",
"Lettuce, Romaine: 2,256 (14%)",
"Melons, Watermelon: 1,637 (10%)",
"Pineapple: 1,608 (10%)",
"Berries: 1,603 (10%)",
"Lettuce, Spring Mix: 1,433 (9%)",
"Broccoli: 1,207 (8%)",
"Melons, Honeydew: 1,076 (7%)",
"Grapes: 1,056 (7%)",
"Melons, Cantaloupe: 1,048 (7%)"
],
datasets: [
data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
backgroundColor: [
"#FFE135",
"#3B5323",
"#fc6c85",
"#ffec89",
"#021c3d",
"#3B5323",
"#046b00",
"#cef45a",
"#421C52",
"#FEA620"
],
]
;
var optionsPie =
responsive: true,
scaleBeginAtZero: true
var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
type: 'pie',
data: data,
options: optionsPie
);
$("#top10Legend").html(top10PieChart.generateLegend());
我说“或多或少”是因为馅饼仍然微不足道：
【讨论】：
是的，饼图明显小得令人尴尬。也许您可以使用 CSS/jQuery 去除饼图本身——只留下图例。然后在下面添加一个重复的饼图（没有图例），这样你就有一个大小合适的图例 + 图表。 我并不太相信会更好；即便如此，恐怕也会违反 KISS 和 DRY 原则。 ChartJS 做得很好，但它肯定不是为了灵活性而构建的。所以......大声笑......你可能不得不亲吻干再见以实现更平衡的图例和图表。另一种方法是深入研究源代码以重新格式化图表的缩放比例。由于家庭事务，我时间紧迫，否则我会提供更多帮助。我喜欢阅读马克吐温（山姆克莱门斯），并祝你在新的冒险中快乐。干杯！ 谢谢；如果您恰好在 10 月 15 日在加利福尼亚州的莫克勒姆山（49 号公路上的天使营地以北 19 英里），下午 2 点将在那里的市政厅进行彩排。【参考方案3】：正如@B.ClayShannon 提到的，第 2 版与第 1 版有很大不同。下面是如何使用第 2 版自定义图例模板的示例。
options:
legendCallback: function (chart)
var text = [];
text.push('<ul class="' + chart.id + '-legend" style="list-style:none">');
for (var i = 0; i < chart.data.datasets[0].data.length; i++)
text.push('<li><div style="width:10px;height:10px;display:inline-block;background:' + chart.data.datasets[0].backgroundColor[i] + '" /> ');
if (chart.data.labels[i])
text.push(chart.data.labels[i]);
text.push('</li>');
text.push('</ul>');
return text.join('');
,
legend: display: false,
它没有直接显示在上面接受的解决方案中，但要将您的图例呈现在您想要调用的其他地方：
$("#myChartLegend").html(myChart.generateLegend());
最后，一些 HTML 将其组合在一起（注意 clearfix 是一个 Bootstrap 类：
<div class="chart">
<div style="float:left">
<canvas id="myChart" class="pie" style="max-width:300px;"></canvas>
</div>
<div class="legend" id="myChartLegend" style="float:left;"></div>
<div style="clear: both;"/>
</div>
【讨论】：
以上是关于如何控制 Chart.JS 饼图图例的位置及其外观？的主要内容，如果未能解决你的问题，请参考以下文章