有人能告诉我我的代码出了什么问题吗？我已经使用Chart.js成功地生成了一个圆环图和一个图例，但是我希望当我将鼠标悬停在图例中的每一项上时，图表的相应部分都用工具提示突出显示，就像this页面上的情况一样
我试着复制并修改那个页面上使用的代码，但是我不能让它工作。建议和帮助感激不尽！！
<!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>
</html>
1条答案
按热度按时间wgx48brx1#
在您尝试使用“helpers”和“canvas”的地方，您没有它们的作用域。
Helpers是指Chartjs帮助程序，可以通过创建
画布指的是你的种族变量画布所以只要添加
here是一个摆弄它的工作