javascript 使用 Chart.js - 为圆环图创建图例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25130790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Chart.js - Creating Legend for Doughnut Chart
提问by user3908735
Can someone tell me what's wrong with my code? I've successfully generated a doughnut chart using Chart.js, as well as a legend, but I'd like the corresponding segment of the chart to highlight with a tooltip when I hover over each item in the legend, just like how it does on thispage
有人可以告诉我我的代码有什么问题吗？我已经使用 Chart.js 成功生成了一个圆环图以及一个图例，但是当我将鼠标悬停在图例中的每个项目上时，我希望图表的相应部分用工具提示突出显示，就像它的工作方式一样在这个页面
I tried copying over and modifying the code used on that exact page, but I can't get it to work. Advice and help appreciated!!
我尝试复制并修改该确切页面上使用的代码，但无法使其正常工作。建议和帮助表示赞赏！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src='Chart.js'></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
<ul class="doughnut-legend">
<li><span style="background-color:#40af49"></span>African American</li>
<li><span style="background-color:#ac558a"></span>Other</li>
<li><span style="background-color:#f05541"></span>Multi-Racial, Not Hispanic</li>
<li><span style="background-color:#3ac2d0"></span>Hispanic/Latino</li>
<li><span style="background-color:#faaf3c"></span>Asian</li>
<li><span style="background-color:#4287b0"></span>White/Caucasian</li>
</ul>
<script>
var pieData = [
{
value: 24.8,
color: "#40af49",
label: "African American"
},
{
value : 2.9,
color : "#ac558a",
label: "Other"
},
{
value : 5.7,
color : "#f05541",
label: "Multi-Racial, Not Hispanic"
},
{
value : 19.1,
color : "#3ac2d0",
label: "Hispanic/Latino"
},
{
value : 6.5,
color : "#faaf3c",
label: "Asian"
},
{
value : 41,
color : "#4287b0",
label: "White/Caucasian"
}
];
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, { tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>%", animateRotate: true });
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.generateLegend();
// Include a html legend template after the module doughnut itself
helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
helpers.addEvent(legendNode, 'mouseover', function(){
var activeSegment = race.segments[index];
activeSegment.save();
race.showTooltip([activeSegment]);
activeSegment.restore();
});
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){
race.draw();
});
canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
</script>
</body>
回答by Quince
Where you are trying to use 'helpers' and 'canvas' you do not have scope for them.
在您尝试使用“助手”和“画布”的地方，您没有使用它们的余地。
Helpers refers to Chartjs helpers, this can be easily added by creating
Helpers 指的是 Chartjs 助手，这可以通过创建轻松添加
var helpers = Chart.helpers
Canvas refers to you race variables canvas so just add
画布是指你种族变量画布，所以只需添加
race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
hereis a fiddle with it working
这是一个小提琴工作
