Ogranicz liczbę etykiet na wykresie liniowym Chart.js.

95

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:

wprowadź opis obrazu tutaj

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

mmmm
źródło
czy możesz podać link?
Dheeraj
do strony internetowej? nie, robię aplikację na Androida, a ten wykres jest na mojej lokalnej stronie ...
mmmm,
Proszę określić, której biblioteki używasz, ChartJS firmy DevExpress czy Chart.js?
Pavel Gruba
@mmmm, czy coś wymyśliłeś? Wypróbowałem odpowiedź Nikity poniżej, ale zostawiła mnie z tą dziwną luką: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
Odpowiedź Nikity wydaje się być poprawna. @mmmm, rozważ oznaczenie go jako poprawnej odpowiedzi stackoverflow.com/a/39326127/179138
Caio Cunha

Odpowiedzi:

155

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

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Nikita Ag
źródło
4
Odpowiedź powyżej plus ta odpowiedź tutaj stackoverflow.com/a/37257056/558094 to bomba.
Vinayak Garg
3
Coś tu nie gra. Dostaję ogromną lukę między dwoma ostatnimi tikami
Mark Boulder
2
Skąd czerpiesz te informacje? Wiele odpowiedzi, które czytam na temat Chart.js - nie mogę znaleźć w ich dokumentach chartjs.org/docs/latest , czy brakuje mi miejsca, w którym mogę znaleźć udokumentowane wszystkie te małe właściwości i możliwe do zastąpienia wywołania zwrotne?
Max Yari,
1
sir, jesteś niesamowity!
Jay Geeth,
2
Możesz również dodać, maxRotation: 0jeśli chcesz, aby nie obracał się przed rozpoczęciem upuszczania etykiet.
Caio Cunha
23

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"].).

ben
źródło
To świetny hack, dzięki! Dodałem to tutaj .
Trufa
40
Pamiętaj, że zaliczenie ""usuwa również odpowiednie podpowiedzi z wykresu!
Haywire
3
Chyba że się mylę to można łatwo zrobić z listowego, jeśli chcesz na przykład, aby pokazać co wytwórnię 10th: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Liczbę 10 można oczywiście zadeklarować jako stałą na początku pliku, aby ułatwić parametryzację procesu.
pkaramol
można by to również zrobić bez "", jak w odpowiedzi na to pytanie problem z pionową linią obręczy z chart.js, gdzie PO miał problem z czarną linią pojawia się przy pierwszym wystąpieniu tego podwójnego cudzysłowu, w takim przypadku pomogło, ponownie jako @ haywire wspomniał, że usuwa etykietę z podpowiedzi
Mi-Creativity
15

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
});`
George D.
źródło
13

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: wprowadź opis obrazu tutaj

Z { showXLabels: 10 }przekazaną opcją: wprowadź opis obrazu tutaj

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

Pogmatwany
źródło
Chciałbym tego użyć, ale chyba robię coś złego. Odwołałem się do github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js, ale (od 30 października 2015 r.) Nie działa i nie zawiera nawet frazy „showXLabels”. Starszy, pod adresem github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , działa dobrze. Chciałbym otrzymać działającą, otagowaną wersję najnowszej wersji, abym mógł bezpiecznie połączyć ją przez CDN z RawGit. To Fiddle (choć nie jest destylowane tylko do wydania) pokazuje, o co mi chodzi: jsfiddle.net/45cLcxdh/14
rkagerer
Próbowałem tego użyć, ale wygląda na to, że „Chart.Line.js” nie jest używany, więc nic się nie zmienia. Użyłem "nowy wykres (ctx) .Line (dane, opcje);" stworzyć wykres.
FlyingNimbus
Korzystanie z Chart JS 2.6.0 i opcja nie działa. Ostatecznie musiałem użyć odpowiedzi @ ben's stackoverflow.com/a/26183983/3319454
3bdalla
1
Myślę, że to część poprzedniej wersji
alexalejandroem
@alexalejandroem Tak, odpowiedź została udzielona w 2014 roku! ;-)
Haywire
3

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
            }
          }
        ]
      }
Edgar Olivar
źródło
2

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.

yegong
źródło
0

Ta odpowiedź działa jak urok.

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

var clone = function(el){ return el.slice(0); }
Lackneets
źródło
-1

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.

Jake
źródło
3
nigdy nie zmieniaj oryginalnego pliku biblioteki, który zepsuje się po aktualizacji wersji.
Raptor