2017-04-25 1 views
0

J'ai un tableau JS Canvas et si les valeurs sont 0, je voudrais cacher les étiquettes. 2 de mes points de données sont non-zéro. Mon JavaScript est:Masquage des étiquettes pour le graphique CanvasJS?

  var chart = new CanvasJS.Chart("chartContainer", 
      { 
       title:{ 
        text: "" 
       }, 
       legend: { 
        maxWidth: 350, 
        itemWidth: 120 
       }, 
       data: [ 
       { 
        type: "pie", 
        showInLegend: true, 
        toolTipContent: "${y} - #percent %", 
        dataPoints: [ 
         { y: debt, indexLabel: "Debt Payments" }, 
         { y: housing, indexLabel: "Housing" }, 
         { y: utilities, indexLabel: "Utilities" }, 
         { y: foodandsupplies, indexLabel: "Food and Supplies"}, 
         { y: transportation, indexLabel: "Transportation" }, 
         { y: health, indexLabel: "Health"}, 
         { y: otherDebts, indexLabel: "Other payments"} 
        ] 
       } 
       ] 
      }); 
      chart.render(); 

Le résultat du JavaScript est:

Pie Chart

Je vous serais reconnaissant toute aide à ce sujet. Merci!

Répondre

1

Vous pouvez masquer les indexLabels pour les points de données avec zéro comme valeurs y en parcourant les options du graphique et en définissant l'indexLabel comme une chaîne vide pour tous ces points de données.

Ajoutez cet extrait de code avant de rendre le graphique, c'est-à-dire chart.render() et cela devrait fonctionner correctement.

for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) { 
if(chart.options.data[0].dataPoints[i].y === 0) 
    chart.options.data[0].dataPoints[i].indexLabel = ""; 
} 

Espérons que ça aide.