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

Question

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

use*_*735 3 javascript jquery charts chart.js

有人能告诉我我的代码有什么问题吗？我已经成功地使用产生一个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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Qui*_*nce 7

在你试图使用"助手"和"画布"的地方,你没有它们的范围.

助手指的是Chartjs助手,这可以通过创建轻松添加

var helpers = Chart.helpers

Run Code Online (Sandbox Code Playgroud)

Canvas是指你的种族变量canvas,所以只需添加

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

Run Code Online (Sandbox Code Playgroud)

这是一个工作的小提琴

归档时间：	11 年，1 月前
查看次数：	17928 次
最近记录：	10 年，3 月前