chartjs: Wie spezifische Markierung entfernen

Question

Ich habe ein Balkendiagramm mit diesen Daten und Optionen:

var data = { 
    labels: periodnames, 
    datasets: [   
     { 
      yAxisID: "bar-stacked", 
      data: rcash, 
      backgroundColor: "#FFCE56",     
      label:"" 
     }, 
    { 
     yAxisID:"bar-stacked", 
     data: pcash, 
     backgroundColor: "#FFCE56", 
     label: "cash"   

    }  

    ] 

}; 

var options = {   
    animation: { 
     animateScale: true 
    },   
    scales: { 
     xAxes: [{ 
     stacked: true, 
    }],   
     yAxes: [ 
      { 
       display:false, 
       id: "line-axis",     

      }, 
      { 
      id: "bar-stacked", 
      stacked: true,     

     }    
     ] 
    } 
} 

finactivityGraphChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

Das Ergebnis Chart ist dies:

Mein Problem ist, dass ich will nicht Zeigen Sie die Beschriftung des ersten Datasets an. Wenn ich es nicht definiere, zeigt es die gelbe Box mit dem Wert "undefine" daneben. Ich nehme an, dass ich die Chart.js-Datei ändern muss. Irgendwelche Vorschläge?

Answer 1

Dies könnte erreicht werden, mit der filter Funktion der Legende 's Etikett.

siehe Legend Label Configuration

Kurz gesagt, die folgenden in Ihrem Diagramm Optionen hinzufügen ...

legend: { 
    labels: { 
     filter: function(label) { 
     if (label.text === 'cash') return true; 
     } 
    } 
}, 

ᴅᴇᴍᴏ

var ctx = document.querySelector('#c').getContext('2d'); 
 
var data = { 
 
    labels: ['Jan', 'Feb', 'Mar'], 
 
    datasets: [{ 
 
     yAxisID: "bar-stacked", 
 
     data: [1, 2, 3], 
 
     backgroundColor: "#FFCE56", 
 
     label: "gold" 
 
    }, { 
 
     yAxisID: "bar-stacked", 
 
     data: [-1, -2, -3], 
 
     backgroundColor: "#FFCE56", 
 
     label: "cash" 
 
    }] 
 
}; 
 
var options = { 
 
    legend: { 
 
     labels: { 
 
     filter: function(label) { 
 
      if (label.text === 'cash') return true; //only show when the label is cash 
 
     } 
 
     } 
 
    }, 
 
    animation: { 
 
     animateScale: true 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     stacked: true, 
 
     }], 
 
     yAxes: [{ 
 
     display: false, 
 
     id: "line-axis", 
 
     }, { 
 
     id: "bar-stacked", 
 
     stacked: true, 
 
     }] 
 
    } 
 
} 
 
finactivityGraphChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: data, 
 
    options: options 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script> 
 
<canvas id="c"></canvas>