Ogranicz liczbę etykiet na wykresie liniowym Chart.js.

Chcę wyświetlić wszystkie punkty na moim wykresie z danych, które otrzymuję, ale nie chcę wyświetlać dla nich wszystkich etykiet, ponieważ wtedy wykres nie jest zbyt czytelny. Szukałem tego w dokumentacji, ale nie mogłem znaleźć żadnego parametru, który by to ograniczył.

Nie chcę brać na przykład tylko trzech etykiet, ponieważ wtedy wykres jest również ograniczony do trzech punktów. Czy to możliwe?

Mam teraz coś takiego:

Gdybym mógł zostawić co trzecią czwartą wytwórnię, byłoby wspaniale. Ale nie znalazłem absolutnie nic na temat opcji etykiet.

Spróbuj dodać options.scales.xAxes.ticks.maxTicksLimitopcję:

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

Aby uzyskać konkretność, załóżmy, że Twoja oryginalna lista etykiet wygląda następująco:

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

Jeśli chcesz wyświetlić tylko co czwartą etykietę, przefiltruj listę etykiet tak, aby co czwarta etykieta była wypełniona, a wszystkie pozostałe były pustym ciągiem (np ["0", "", "", "", "4", "", "", "", "8"].).

Dla każdego, kto chce to osiągnąć na Chart JS V2, będą działać następujące rzeczy:

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


                    var xLabels = data.ticks;

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

Następnie jak zwykle przekaż zmienną options do:

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

AKTUALIZACJA:

Zaktualizowałem widelec najnowszym ciągiem (stan na 27 stycznia 2014 r.) Z głównej gałęzi NNick's Chart.js. https://github.com/hay-wire/Chart.js/tree/showXLabels

ORYGINALNA ODPOWIEDŹ:

Dla tych, którzy wciąż borykają się z tym problemem, rozwidliłem Chart.js jakiś czas temu, aby rozwiązać ten sam problem. Możesz to sprawdzić na: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Starsza gałąź! Sprawdź gałąź showXLabels, aby uzyskać najnowsze informacje.

Jak używać:

Dotyczy wykresów słupkowych i liniowych.

Użytkownik może teraz przekazać a, { showXLabels: 10 }aby wyświetlić tylko 10 etykiet (rzeczywista liczba wyświetlanych etykiet może się nieco różnić w zależności od liczby wszystkich etykiet obecnych na osi x, ale nadal pozostanie blisko 10)

Bardzo pomaga, gdy jest bardzo dużo danych. Wcześniej wykres wyglądał na zdewastowany z powodu nakreślenia na sobie etykiet osi x w ciasnej przestrzeni. ZshowXLabels użytkownik ma teraz kontrolę nad zmniejszeniem liczby etykiet do dowolnej liczby etykiet pasujących do dostępnej mu przestrzeni.

Zobacz załączone obrazy dla porównania.

Bez showXLabelsopcji:

Z { showXLabels: 10 }przekazaną opcją:

Oto dyskusja na ten temat: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

do obrotu osi

Użyj tego:

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

Zgodnie z numerem 12 na github chart.js . Obecne rozwiązania obejmują:

1. Użyj wersji 2.0 alfa (nie produkcyjnej)
2. W ogóle ukryj oś X, gdy stanie się zbyt tłoczna (w ogóle nie można jej zaakceptować)
3. ręcznie steruj pomijaniem etykiety osi X (nie na responsywnej stronie)

Jednak po kilku minutach myślę, że jest lepsze rozwiązanie.

Poniższy urywek ukryje etykiety automatycznie . Zmodyfikuj xLabelspusty ciąg przed wywołaniem draw()i przywróć je po tym. Co więcej, można zastosować ponowne obrócenie etykiet x, ponieważ po ukryciu jest więcej miejsca.

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

Proszę zauważyć, że clonejest to zależność zewnętrzna.

Miałem podobny problem i otrzymałem dobre rozwiązanie mojego konkretnego problemu, pokazując etykietę w podpowiedzi, ale nie na osi X dla wykresu liniowego chartjs . Sprawdź, czy to ci pomoże

Ta odpowiedź działa jak urok.

Jeśli zastanawiasz się nad clonefunkcją, wypróbuj tę:

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

W pliku Chart.js powinieneś znaleźć (dla mnie w linii 884)

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

Jeśli po prostu zawinąć to wezwanie jednej linii fillTextz if ( i % config.xFreq === 0){ ... } czym w chart.Line.defaultscoś dodać linię xFreq : 1powinieneś móc zacząć korzystać xFreqw twojej optionsgdy dzwonisz new Chart(ctx).Line(data, options).

Pamiętaj, że to dość hacky.