Chart.js v2 ukrywa etykiety zestawu danych


107

Mam następujące kody, aby utworzyć wykres przy użyciu 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
        }]
    }
});

Kody wyglądają na proste, ale nie mogę usunąć etykiety z wykresu. Wypróbowałem wiele rozwiązań, które znalazłem online, ale większość z nich korzysta z Chart.js v1.x.

Jak mogę usunąć etykiety zbioru danych?

Odpowiedzi:


253

Po prostu ustaw opcje labeli w ten tooltipsposób

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

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


działa jak urok, dzięki. tak przy okazji, jak zmienić kolor gradientu wykresu liniowego?
Raptor

1
Masz na myśli, jak użyć gradientu jako borderColor / backgroundColor. Po prostu utwórz jeden w kontekście i użyj go podczas inicjalizacji - patrz jsfiddle.net/g9h6gtvx
potatopeelings

1
Co jeśli chcę go użyć na jednym zbiorze danych, ale nie na drugim
Nick Alexander

To działa! tylko jedno pytanie, gdzie znalazłeś wszystkie te opcje?
fangzhzh

39

Dodaj:

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

na początku twojego kodu skryptu;


Prosty i działa doskonale. Zauważyłem, że zaakceptowana odpowiedź psuje pewne rzeczy.
dezodorant w sztyfcie

9

Możesz również umieścić podpowiedź w jednym wierszu, usuwając „tytuł”:

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

wprowadź opis obrazu tutaj


8

To tak proste, jak dodanie tego: legend: { display: false, }

// Lub jeśli chcesz, możesz użyć tej innej opcji, która również powinna działać:

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


Prosta odpowiedź, nie ma potrzeby odkrywania koła na nowo.
TNT

opcje: {legenda: {display: false,}} Pomaga napisać, który blok wstawić (to jest w zasadzie problem z dokumentacją)
Normajean

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

2
Cześć, witaj w SO. rozważ dodanie krótkiego wyjaśnienia obok kodu
bagerard
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.