Chart.js v2 nasconde le etichette del set di dati

106

Ho i seguenti codici per creare un grafico utilizzando Chart.js v2.1.3:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

I codici sembrano semplici, ma non riesco a rimuovere l'etichetta dal grafico. Ho provato molte soluzioni che ho trovato online, ma la maggior parte di esse utilizza Chart.js v1.x.

Come posso rimuovere le etichette del set di dati?

chart.js chart.js2

— Raptor
fonte

252

Basta impostare le opzioni labele in questo tooltipmodo

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

Fiddle - http://jsfiddle.net/g19220r6/

— potatopeelings
fonte

funziona come un fascino, grazie. a proposito, come cambiare il colore del gradiente del grafico a linee?

— Raptor

1

Vuoi dire, come usare un gradiente come borderColor / backgroundColor. Basta crearne uno nel contesto e usarlo durante l'inizializzazione - vedi jsfiddle.net/g9h6gtvx

— potatopeelings

1

E se volessi usarlo su un set di dati ma non sull'altro

— Nick Alexander

Funziona! solo una domanda, dove hai trovato tutte queste opzioni?

— fangzhzh

39

Inserisci:

Chart.defaults.global.legend.display = false;

all'inizio del codice dello script;

— Rochan
fonte

Semplice e funziona perfettamente. Ho notato che la risposta accettata stava rompendo alcune cose.

— stickdeodorant

9

Puoi anche inserire la descrizione comando su una riga rimuovendo il "titolo":

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

— MPit
fonte

8

È semplice come aggiungere questo: legend: { display: false, }

// O se vuoi puoi usare quest'altra opzione che dovrebbe funzionare anche:

Chart.defaults.global.legend.display = false;

— Reynald Ramirez de Luna
fonte

Risposta semplice, non c'è bisogno di reinventare la ruota.

— TNT

opzioni: {legenda: {display: false,}} Aiuta a scrivere in quale blocco metterlo (questo è fondamentalmente il problema con la documentazione)

— Normajean

2

new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

— Juan Ignacio Urcola
fonte

2

Ciao, benvenuto in SO. considera l'aggiunta di una breve spiegazione accanto al codice

— bagerard