Chart.js v2 Masquer les étiquettes des jeux de données

107

J'ai les codes suivants pour créer un graphique en utilisant 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
        }]
    }
});

Les codes semblent simples, mais je ne peux pas supprimer l'étiquette du graphique. J'ai essayé beaucoup de solutions que j'ai trouvées en ligne, mais la plupart d'entre elles utilisent Chart.js v1.x.

Comment puis-je supprimer les étiquettes de l'ensemble de données?

chart.js chart.js2

— Raptor
source

253

Il suffit de définir les options labelet tooltipcomme ça

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

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

— pommes de terre
source

fonctionne comme du charme, merci. au fait, comment changer la couleur du dégradé du graphique en courbes?

— Raptor

1

Vous voulez dire, comment utiliser un dégradé comme borderColor / backgroundColor. Créez-en un sur le contexte et utilisez-le lors de l'initialisation - voir jsfiddle.net/g9h6gtvx

— potatopeelings

1

Et si je veux l'utiliser sur un ensemble de données mais pas sur l'autre

— Nick Alexander

Ça marche! juste une question, où avez-vous trouvé toutes ces options?

— fangzhzh le

39

ajouter:

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

au démarrage de votre code de script;

— Rochan
source

Simple et fonctionne parfaitement. J'ai remarqué que la réponse acceptée cassait certaines choses.

— stickdeodorant

9

Vous pouvez également mettre l'info-bulle sur une seule ligne en supprimant le "titre":

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,
            }
        },
    },
});

— mpen
source

8

C'est aussi simple que d'ajouter ceci: legend: { display: false, }

// Ou si vous le souhaitez, vous pouvez utiliser cette autre option qui devrait également fonctionner:

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

— Reynald Ramirez de Luna
source

Réponse simple, pas besoin de réinventer la roue.

— TNT

options: {legend: {display: false,}} Cela aide à écrire dans quel bloc le mettre (c'est fondamentalement le problème avec la documentation)

— Normajean

2

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

— Juan Ignacio Urcola
source

2

Salut, bienvenue à SO. pensez à ajouter une brève explication à côté du code

— bagerard