Chart.js v2 menyembunyikan label set data

106

Saya memiliki kode berikut untuk membuat grafik menggunakan 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
        }]
    }
});

Kode terlihat sederhana, tetapi saya tidak dapat menghapus label dari grafik. Saya mencoba banyak solusi yang saya temukan online, tetapi kebanyakan dari mereka menggunakan Chart.js v1.x.

Bagaimana cara menghapus label set data?

chart.js chart.js2

— Raptor
sumber

252

Cukup atur opsi labeldan tooltipseperti itu

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

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

— potatopeelings
sumber

bekerja seperti pesona, terima kasih. ngomong-ngomong, bagaimana cara mengubah warna gradien grafik garis?

— Raptor

1

Maksud Anda, bagaimana menggunakan gradien sebagai borderColor / backgroundColor. Buat saja satu pada konteks dan gunakan itu saat menginisialisasi - lihat jsfiddle.net/g9h6gtvx

— potatopeelings

1

Bagaimana jika saya ingin menggunakannya di satu kumpulan data tetapi tidak di yang lain

— Nick Alexander

Berhasil! hanya satu pertanyaan, di mana Anda menemukan semua opsi ini?

— fangzhzh

39

Menambahkan:

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

di awal kode skrip Anda;

— Rochan
sumber

Sederhana dan bekerja dengan sempurna. Saya perhatikan jawaban yang diterima melanggar beberapa hal.

— stickdeodorant

9

Anda juga dapat meletakkan tooltip ke dalam satu baris dengan menghapus "judul":

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
sumber

8

Ini sesederhana menambahkan ini: legend: { display: false, }

// Atau jika Anda mau, Anda bisa menggunakan opsi lain ini yang seharusnya juga berfungsi:

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

— Reynald Ramirez de Luna
sumber

Jawaban sederhana, tidak perlu menemukan kembali roda.

— TNT

options: {legend: {display: false,}} Ini membantu untuk menulis blok mana yang akan dimasukkan (ini pada dasarnya masalah dengan dokumentasinya)

— Normajean

2

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

— Juan Ignacio Urcola
sumber

2

Hai, selamat datang di SO. pertimbangkan untuk menambahkan penjelasan singkat di sebelah kode

— bagerard