使用Chart.js - 为Doughnut图表创建图例

Question

使用Chart.js - 为Doughnut图表创建图例

3

有人能告诉我代码哪里出了问题吗？我已经成功使用Chart.js生成了一个甜甜圈图表，还有一个图例，但是我希望当我悬停在每个图例项目上时，图表的相应部分可以用工具提示突出显示，就像这个页面上所做的那样。

我尝试复制并修改该页面上使用的代码，但无法使其正常工作。期待您的建议和帮助！

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

- user3908735

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quince · Accepted Answer

当您尝试使用“helpers”和“canvas”时，您没有它们的范围。

助手是指Chartjs助手，可以通过创建来轻松添加

var helpers = Chart.helpers

画布指的是您竞技场变量画布，因此只需添加即可。

race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);

这里是一个演示它如何工作的代码片段