comment paramétrer la personnalisation du graphique js

Question

Je souhaite utiliser chart.js dans mes sites Web. Je suis mis en œuvre avec succès avec le code ci-dessous

var doughnutData = [ 
     { 
      value: 30, 
      color:"#f91942", 
     }, 
     { 
      value : 50, 
      color : "#0b7bb5" 
     }, 
     { 
      value : 120, 
      color : "#4D5360" 
     } 

    ]; 

    var labels = [ 
     'Red', 
     'Yellow', 
     'Blue' 
    ]; 


    var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData); 

</script>` 

Le résultat est comme ce

Maintenant, je veux savoir qui est là partout pour faire la colonne affiche le numéro vol stationnaire de la souris et en ajoutant une étiquette pour chaque colonne?

Answer 1

Ajouter une étiquette avec vos données pour l'afficher dans l'info-bulle

var doughnutData = [{ 
    value: 30, 
    color: "#f91942", 
    label: 'Red' 
}, { 
    value: 50, 
    color: "#0b7bb5", 
    label: 'Yellow' 
}, { 
    value: 120, 
    color: "#4D5360", 
    label: 'Blue' 
}]; 

Cela permet d'afficher l'info-bulle avec le modèle par défaut

<%if (label){%><%=label%>: <%}%><%= value %> 

qui montrent comme

Rouge: 30

Vous pouvez modifier le modèle à l'aide tooltipTemplate clés, comme ci-dessous

var options: { 
    tooltipTemplate: "This value is -> <%= value %>" 
}; 
var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(data, options); 

Cela vous donnera

Cette valeur est -> 50