Chart.js v2 veri kümesi etiketlerini gizle


107

Chart.js v2.1.3 kullanarak bir grafik oluşturmak için aşağıdaki kodlara sahibim:

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

Kodlar basit görünüyor, ancak etiketi grafikten kaldıramıyorum. Çevrimiçi bulduğum birçok çözümü denedim, ancak çoğu Chart.js v1.x kullanıyor.

Veri kümesi etiketlerini nasıl kaldırabilirim?

Yanıtlar:


253

Sadece labelve tooltipseçeneklerini şu şekilde ayarlayın

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

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


çekicilik gibi çalışıyor, teşekkürler. bu arada, çizgi grafiğinin gradyan rengi nasıl değiştirilir?
Raptor

1
Bir gradyanı borderColor / backgroundColor olarak kullanmayı mı kastediyorsunuz? Bağlamda bir tane oluşturun ve bunu başlatırken kullanın - bkz. Jsfiddle.net/g9h6gtvx
potatopeelings

1
Ya onu bir veri kümesinde kullanmak isterken diğerinde kullanmak istemiyorsam
Nick Alexander

İşe yarıyor! sadece bir soru, tüm bu seçenekleri nerede buldunuz?
fangzhzh

39

Ekle:

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

komut dosyası kodunuzun başlangıcında;


Basit ve mükemmel çalışıyor. Kabul edilen cevabın bazı şeyleri bozduğunu fark ettim.
stickdeodorant

9

Ayrıca, "başlığı" kaldırarak araç ipucunu bir satıra da yerleştirebilirsiniz:

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

görüntü açıklamasını buraya girin


9

Bunu eklemek kadar basit: legend: { display: false, }

// Veya isterseniz, çalışması gereken bu diğer seçeneği de kullanabilirsiniz:

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


Basit cevap, tekerleği yeniden icat etmeye gerek yok.
TNT

seçenekler: {legend: {display: false,}} Hangi bloğun konulacağını yazmaya yardımcı olur (bu temelde dokümantasyondaki sorundur)
Normajean

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

2
Merhaba, SO'ya hoş geldiniz. kodun yanına kısa bir açıklama eklemeyi düşünün
bagerard
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.