Chart.js çizgi grafiğinde etiket sayısını sınırlayın

Grafiğimdeki tüm noktaları aldığım verilerden görüntülemek istiyorum, ancak onlar için tüm etiketleri görüntülemek istemiyorum, çünkü o zaman grafik çok okunabilir değildir. Dokümanlarda arıyordum ama bunu sınırlayacak herhangi bir parametre bulamadım.

Örneğin sadece üç etiket almak istemiyorum çünkü o zaman grafik de üç nokta ile sınırlıdır. Mümkün mü?

Şu anda buna benzer bir şeyim var:

Her üçüncü-dördüncü etiketten bir ayrılabilseydim harika olurdu. Ancak etiket seçenekleri hakkında kesinlikle hiçbir şey bulamadım.

options.scales.xAxes.ticks.maxTicksLimitSeçeneği eklemeyi deneyin :

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Somutluk açısından, orijinal etiket listenizin şöyle göründüğünü varsayalım:

["0", "1", "2", "3", "4", "5", "6", "7", "8"]

Yalnızca her 4. etiketi görüntülemek istiyorsanız, etiketler listenizi filtreleyin, böylece her 4. etiket doldurulur ve diğerlerinin tümü boş dizedir (örn. ["0", "", "", "", "4", "", "", "", "8"]).

Bunu Chart JS V2'de başarmak isteyenler için aşağıdakiler işe yarayacaktır:

 var options =  {  
         scales: {
            xAxes: [{
                afterTickToLabelConversion: function(data){


                    var xLabels = data.ticks;

                    xLabels.forEach(function (labels, i) {
                        if (i % 2 == 1){
                            xLabels[i] = '';
                        }
                    });
                } 
            }]   
        }
}

Ardından seçenekler değişkenini her zamanki gibi a:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`

GÜNCELLEME:

Çatalımı NNick'in Chart.js ana şubesinden en son çekmeyle (27 Ocak 2014 itibarıyla) güncelledim. https://github.com/hay-wire/Chart.js/tree/showXLabels

ORİJİNAL CEVAP:

Hala bu sorunla karşılaşanlar için, aynı sorunu çözmek için Chart.js'yi bir süre önce çatalladım. Şuradan kontrol edebilirsiniz: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Eski şube! En son çekim için showXLabels şubesini kontrol edin.

Nasıl kullanılır:

Çubuk grafik ve çizgi grafik için geçerlidir.

Kullanıcı artık bir { showXLabels: 10 } yalnızca 10 etiket görüntülemek için (gerçek görüntülenen etiket sayısı, x ekseninde bulunan toplam etiket sayısına bağlı olarak biraz farklı olabilir, ancak yine de 10'a yakın kalacaktır)

Çok büyük miktarda veri olduğunda çok yardımcı olur. Daha önce, grafik sıkışık alanda birbiri üzerine çizilen x ekseni etiketleri nedeniyle harap görünüyordu. İle showXLabelskullanıcı artık etiket sayısını, kullanabileceği alana uygun etiket sayısına kadar düşürme kontrolüne sahip.

Karşılaştırma için ekteki resimlere bakın.

showXLabelsSeçenek olmadan :

Seçeneğe { showXLabels: 10 }geçildi:

İşte bununla ilgili bazı tartışmalar: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

eksen dönüşü için

bunu kullan:

          scales: {
        xAxes: [
          {
            // aqui controlas la cantidad de elementos en el eje horizontal con autoSkip
            ticks: {
              autoSkip: true,
              maxRotation: 0,
              minRotation: 0
            }
          }
        ]
      }

Göre chart.js konu # 12 GitHub'dan . Mevcut çözümler şunları içerir:

1. 2.0 alfa kullanın (üretim değil)
2. Çok kalabalık olduğunda x eksenini hiç gizle (hiç kabul edemez)
3. x ekseninin etiket atlamasını manuel olarak kontrol edin (duyarlı sayfada değil)

Ancak birkaç dakika sonra daha iyi bir çözüm olduğunu düşünüyorum.

Aşağıdaki ön bilgi, etiketleri otomatik olarak gizleyecektir . xLabelsÇağırmadan önce boş dizeyle değiştirerek draw()ve daha sonra onları geri yükleyerek . Dahası, yeniden dönen x etiketleri, gizlendikten sonra daha fazla alan olduğu için uygulanabilir.

var axisFixedDrawFn = function() {
    var self = this
    var widthPerXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / self.xLabels.length
    var xLabelPerFontSize = self.fontSize / widthPerXLabel
    var xLabelStep = Math.ceil(xLabelPerFontSize)
    var xLabelRotationOld = null
    var xLabelsOld = null
    if (xLabelStep > 1) {
        var widthPerSkipedXLabel = (self.width - self.xScalePaddingLeft - self.xScalePaddingRight) / (self.xLabels.length / xLabelStep)
        xLabelRotationOld = self.xLabelRotation
        xLabelsOld = clone(self.xLabels)
        self.xLabelRotation = Math.asin(self.fontSize / widthPerSkipedXLabel) / Math.PI * 180
        for (var i = 0; i < self.xLabels.length; ++i) {
            if (i % xLabelStep != 0) {
                self.xLabels[i] = ''
            }
        }
    }
    Chart.Scale.prototype.draw.apply(self, arguments);
    if (xLabelRotationOld != null) {
        self.xLabelRotation = xLabelRotationOld
    }
    if (xLabelsOld != null) {
        self.xLabels = xLabelsOld
    }
};

Chart.types.Bar.extend({
    name : "AxisFixedBar",
    initialize : function(data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Chart.types.Line.extend({
    name : "AxisFixedLine",
    initialize : function(data) {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
        this.scale.draw = axisFixedDrawFn;
    }
});

Lütfen bunun cloneharici bir bağımlılık olduğuna dikkat edin .

Ben de benzer türde bir sorun yaşadım ve özel sorunuma güzel bir çözüm önerildi etiketi araç ipucunda göster ancak chartjs çizgi grafiği için x ekseninde değil . Bunun size yardımcı olup olmadığına bakın

Bu cevap çalışıyor.

cloneİşlevi merak ediyorsanız , şunu deneyin:

var clone = function(el){ return el.slice(0); }

Chart.js dosyasında şunu bulmalısınız (benim için 884 satırında)

var Line = function(...
    ...
    function drawScale(){
        ...
        ctx.fillText(data.labels[i], 0,0);
        ...

Sadece bu tek hat çağrısını sarın Eğer fillTextile if ( i % config.xFreq === 0){ ... } ve sonra chart.Line.defaultseklenti şey hattı xFreq : 1kullanmaya başlamak gerekir xFreqGözlerinde farklı optionsAradığınızdanew Chart(ctx).Line(data, options) .

Unutmayın, bu oldukça karmaşık.