À l'aide de Chart.js - la Création de la Légende de Graphique en anneau

Quelqu'un peut me dire quel est le problème avec mon code? J'ai réussi à générer un graphique en anneau à l'aide de Chart.js, ainsi que d'une légende, mais j'aimerais le segment correspondant de la carte pour mettre en surbrillance avec une info-bulle lorsque j'ai passez la souris sur chaque élément de la légende, tout comme la façon dont il le fait sur cette page

J'ai essayé de copier sur les et modifiant le code utilisé sur la page exacte, mais je peux pas le faire fonctionner. Des conseils et de l'aide appréciée!!

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

OriginalL'auteur user3908735 | 2014-08-05

  1. 7

    Où vous essayez d'utiliser des "aidants" et "toile" vous n'avez pas de portée pour eux.

    Aides se réfère à Chartjs aides, cela peut être facilement ajoutée par la création de 

    var helpers = Chart.helpers

    Toile se réfère à la course des variables de la toile, juste ajouter 

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

    ici est une tripoter de travail

    MERCI!!!!!!! Si utile
    cool, content d'avoir pu aider, si ce problème est résolu pour vous pouvez vous marquez la question répondu. cheers
    J'ai une question de suivi. Il ressemble à la légende " div " est généré par le script. Mais comment pourrais-je aller sur la modification des propriétés de la div (c)? Et si je veux la carte et de la légende de vivre dans un plus grand bloc div?
    plutôt que d'ajouter la légende de la course toile parent parent (peu bizarre) ajouter à un div de votre choix, vous pouvez ensuite le style à l'aide de css comme vous le voulez, voici un exemple jsfiddle.net/leighking2/d07omyao/4
    beau

    OriginalL'auteur Quince