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

Using Chart.js - Creating Legend for Doughnut Chart

本文关键字：创建 甜甜圈 Chart js 使用      更新时间：2023-09-26

谁能告诉我我的代码有什么问题?我已经使用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>

当你试图使用'helper '和'canvas'时，你没有它们的范围。

Helpers指的是Chartjs的helper，这可以通过创建

来轻松添加。
var helpers = Chart.helpers

Canvas指的是你的race变量Canvas所以只需添加

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

这里是一个小提琴，它的工作

相关文章：