wake-up-neo.com

Begrenzen Sie die Anzahl der Beschriftungen in Chart.js Liniendiagramm

Ich möchte alle Punkte in meinem Diagramm aus den Daten anzeigen, die ich erhalte, aber ich möchte nicht alle Beschriftungen für sie anzeigen, da das Diagramm dann nicht gut lesbar ist. Ich habe in den Dokumenten danach gesucht, aber keinen Parameter gefunden, der dies einschränken könnte.

Ich möchte zum Beispiel nicht nur drei Bezeichnungen nehmen, denn dann ist das Diagramm auch auf drei Punkte begrenzt. Ist es möglich?

Ich habe so etwas gerade:

enter image description here

Wenn ich einfach jedes drittvierte Label verlassen könnte, wäre es großartig. Aber ich habe absolut nichts über Label-Optionen gefunden.

javascriptcsscanvaschartschart.js
74
mmmm

Versuchen Sie, das options.scales.xAxes.ticks.maxTicksLimit Option:

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

Nehmen wir der Vollständigkeit halber an, Ihre ursprüngliche Etikettenliste sieht folgendermaßen aus:

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

Wenn Sie nur jedes vierte Etikett anzeigen möchten, filtern Sie Ihre Etikettenliste so, dass jedes vierte Etikett ausgefüllt wird, und alle anderen sind die leere Zeichenfolge (z. B. ["0", "", "", "", "4", "", "", "", "8"]).

17
ben

UPDATE:

Ich habe meine Gabel mit dem neuesten Pull (Stand: 27. Januar 2014) aus NNicks Chart.js Master Branch aktualisiert. https://github.com/hay-wire/Chart.js/tree/showXLabels

URSPRÜNGLICHE ANTWORT:

Für diejenigen, die immer noch mit diesem Problem konfrontiert sind, habe ich vor einiger Zeit Chart.j ausgewählt, um das gleiche Problem zu lösen. Sie können es unter folgender Adresse überprüfen: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Älterer Zweig! Überprüfen Sie die showXLabels-Filiale auf den neuesten Pull.

Wie benutzt man:

Anwendbar auf Balkendiagramm und Liniendiagramm.

Der Benutzer kann jetzt ein { showXLabels: 10 } Übergeben, um nur 10 Etiketten anzuzeigen.

Hilft sehr, wenn es eine sehr große Datenmenge gibt. Früher sah das Diagramm aufgrund von übereinandergezeichneten x-Achsen-Beschriftungen in dem engen Raum verwüstet aus. Mit showXLabels hat der Benutzer jetzt die Möglichkeit, die Anzahl der Etiketten auf die Anzahl der Etiketten zu reduzieren, die in den ihm zur Verfügung stehenden Platz passen.

Siehe die beigefügten Bilder zum Vergleich.

Ohne showXLabels Option: enter image description here

Mit { showXLabels: 10 } Übergeben an Option: enter image description here

Hier ist eine Diskussion darüber: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

13
Haywire

Für alle, die dies mit Chart JS V2 erreichen möchten, funktioniert Folgendes:

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


                    var xLabels = data.ticks;

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

Übergeben Sie dann die Variable options wie gewohnt an:

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

Entsprechend der chart.js Github Ausgabe # 12 . Aktuelle Lösungen umfassen:

  1. Verwenden Sie 2.0 Alpha (nicht Produktion)
  2. Verstecke die X-Achse überhaupt, wenn sie zu überfüllt ist (kann überhaupt nicht akzeptieren)
  3. manuelles Steuern des Überspringens der Beschriftung auf der x-Achse (nicht auf der reaktionsfähigen Seite)

Nach ein paar Minuten denke ich jedoch, dass es eine bessere Lösung gibt.

Das folgende Snippet blendet Beschriftungen automatisch aus . Ändern Sie xLabels mit einer leeren Zeichenfolge, bevor Sie draw() aufrufen, und stellen Sie sie anschließend wieder her. Darüber hinaus können Sie die x-Beschriftungen neu drehen, da nach dem Ausblenden mehr Platz vorhanden ist.

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

Bitte beachten Sie, dass clone eine externe Abhängigkeit ist.

2
yegong

ich hatte eine ähnliche Art von Problem und bekam eine gute Lösung für mein spezielles Problem Beschriftung in QuickInfo, aber nicht in X-Achse für Diagramme Liniendiagramm . Sehen Sie, ob dies Ihnen hilft

1
vsank7787

Diese Antwort wirkt wie ein Zauber.

Wenn Sie sich über die Funktion clone wundern, probieren Sie diese aus:

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