Begrenzen Sie die Anzahl der Beschriftungen im Liniendiagramm von Chart.j.

93

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 sehr gut lesbar ist. Ich habe in den Dokumenten danach gesucht, konnte aber keinen Parameter finden, der dies einschränken würde.

Ich möchte zum Beispiel nicht nur drei Beschriftungen nehmen, da das Diagramm dann auch auf drei Punkte beschränkt ist. Ist es möglich?

Ich habe gerade so etwas:

Geben Sie hier die Bildbeschreibung ein

Wenn ich nur jedes dritte bis vierte Label verlassen könnte, wäre es großartig. Aber ich fand absolut nichts über Etikettenoptionen.

mmmm
quelle
Können Sie einen Link bereitstellen?
Dheeraj
zur Website? Nein, ich mache App auf Android und diese Tabelle ist auf meiner lokalen Seite ..
mmmm
Bitte geben Sie an, welche Bibliothek Sie verwenden, ChartJS von DevExpress oder Chart.js?
Pavel Gruba
@mmmm hast du etwas herausgefunden? Ich habe Nikitas Antwort unten ausprobiert, aber es hat mir diese seltsame Lücke hinterlassen
Mark Boulder
Nikitas Antwort scheint die richtige zu sein. @mmmm, bitte erwägen Sie, es als die richtige Antwort zu markieren stackoverflow.com/a/39326127/179138
Caio Cunha

Antworten:

147

Versuchen Sie, die options.scales.xAxes.ticks.maxTicksLimitOption hinzuzufügen :

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]
Nikita Ag
quelle
4
Die obige Antwort plus diese Antwort hier stackoverflow.com/a/37257056/558094 ist die Bombe.
Vinayak Garg
3
Da stimmt etwas nicht. Ich bekomme eine große Lücke zwischen den letzten beiden Ticks: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder
2
Woher bekommen Sie diese Informationen? Viele Antworten, die ich für Chart.js lese - ich kann sie nicht in ihren Dokumenten finden. Chartjs.org/docs/latest. Vermisse ich einen Ort, an dem ich möglicherweise all diese kleinen Eigenschaften und überschreibbaren Rückrufe dokumentiert finde?
Max Yari
1
Sir, Sie sind großartig!
Jay Geeth
1
Sie können auch hinzufügen, maxRotation: 0wenn Sie möchten, dass es sich nicht dreht, bevor Sie mit dem Löschen der Etiketten beginnen.
Caio Cunha
22

Nehmen wir zur Vereinfachung an, Ihre ursprüngliche Liste der Etiketten sieht folgendermaßen aus:

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

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

ben
quelle
Dies ist ein großartiger Hack, danke! Ich habe es hier hinzugefügt .
Trufa
40
Beachten Sie, dass beim Übergeben ""auch die entsprechenden QuickInfos in der Grafik entfernt werden!
Haywire
3
Wenn ich mich nicht irre, kann dies leicht mit einem Listenverständnis gemacht werden, wenn Sie zB jedes 10. Etikett zeigen möchten : my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Die Nummer 10 kann natürlich am Anfang der Datei als Konstante deklariert werden, um die Parametrisierung des Prozesses zu vereinfachen.
Karamol
es könnte auch ohne getan werden "", wie in der Antwort auf diese Frage vertikales Gürtellinienproblem mit chart.js, bei dem das OP ein Problem mit schwarzer Linie hatte, erscheint beim ersten Auftreten dieses doppelten Anführungszeichens, in diesem Fall half es wieder als @ Haywire erwähnte, dass es das Etikett aus dem Tooltip entfernt
Mi-Creativity
15

Für alle, die dies in 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 Optionsvariable wie gewohnt an:

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

AKTUALISIEREN:

Ich habe meine Gabel mit dem neuesten Zug (Stand: 27. Januar 2014) aus NNicks Chart.js-Hauptniederlassung 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 Chart.js vor einiger Zeit gegabelt, 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 => Ältere Niederlassung! Überprüfen Sie den showXLabels-Zweig auf den neuesten Pull.

Wie benutzt man:

Anwendbar auf Balkendiagramm und Liniendiagramm.

Der Benutzer kann jetzt a übergeben { showXLabels: 10 }, um nur 10 Beschriftungen anzuzeigen (die Anzahl der tatsächlich angezeigten Beschriftungen kann je nach Anzahl der insgesamt auf der x-Achse vorhandenen Beschriftungen etwas unterschiedlich sein, bleibt jedoch weiterhin nahe bei 10).

Hilft sehr, wenn sehr viele Daten vorhanden sind. Früher sah das Diagramm aufgrund der übereinander gezeichneten Beschriftungen der x-Achse in dem engen Raum am Boden zerstört aus. Mit showXLabelshat der Benutzer nun die Möglichkeit, die Anzahl der Etiketten auf die Anzahl der Etiketten zu reduzieren, die gut in den ihm zur Verfügung stehenden Platz passen.

Siehe die beigefügten Bilder für einen Vergleich.

Ohne showXLabelsOption: Geben Sie hier die Bildbeschreibung ein

Mit { showXLabels: 10 }übergeben in Option: Geben Sie hier die Bildbeschreibung ein

Hier einige Diskussionen dazu: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

Haywire
quelle
Würde das gerne benutzen, aber ich muss etwas falsch machen. Ich habe auf github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js verwiesen, aber (Stand: 30. Oktober 2015) funktioniert es nicht und enthält nicht einmal den Ausdruck "showXLabels". Der ältere unter github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js funktioniert einwandfrei . Ich würde gerne eine funktionierende, getaggte Version der neuesten Version erhalten, damit ich sie sicher von RawGit aus per CDN verlinken kann. Diese Geige (obwohl nicht nur auf das Thema destilliert) zeigt, was ich meine: jsfiddle.net/45cLcxdh/14
rkagerer
Versucht, dies zu verwenden, aber es sieht so aus, als würde 'Chart.Line.js' nicht verwendet, daher ändert sich nichts. Ich habe "new Chart (ctx) .Line (Daten, Optionen)" verwendet. um ein Diagramm zu erstellen.
FlyingNimbus
Die Verwendung von Diagramm JS 2.6.0 und der Option funktioniert nicht. Schließlich musste ich @ Bens
3bdalla
1
Ich denke, dies ist Teil einer früheren Version
alexalejandroem
@alexalejandroem Ja, es wurde 2014 beantwortet! ;-)
Haywire
3

für Achsendrehung

benutze das:

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

Laut der Github-Ausgabe Nr. 12 von chart.js . Aktuelle Lösungen umfassen:

  1. Verwenden Sie 2.0 Alpha (keine Produktion)
  2. Verstecke die x-Achse überhaupt, wenn sie zu voll wird (kann überhaupt nicht akzeptieren)
  3. Manuelles Steuern des Beschriftungsspringens der x-Achse (nicht auf der Antwortseite)

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

Das folgende Snippet blendet Beschriftungen automatisch aus . Durch Ändern xLabelsmit leerer Zeichenfolge vor dem Aufrufen draw()und Wiederherstellen danach. Darüber hinaus können neu rotierende x-Beschriftungen angewendet werden, 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 dies cloneeine externe Abhängigkeit ist.

Yegong
quelle
0

Diese Antwort wirkt wie ein Zauber.

Wenn Sie sich über die cloneFunktion wundern , versuchen Sie diese:

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

In der Datei Chart.js sollten Sie finden (in Zeile 884 für mich)

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

Wenn Sie nur diesen einzeiligen Anruf fillTextmit einschließen if ( i % config.xFreq === 0){ ... } und dann eine Zeile chart.Line.defaultshinzufügen, xFreq : 1sollten Sie in der Lage sein, sie xFreqin Ihrem zu verwendenoptions Anruf zu verwenden, wenn Sie anrufen new Chart(ctx).Line(data, options).

Wohlgemerkt, das ist ziemlich hackig.

Jake
quelle
3
Ändern Sie niemals die ursprüngliche Bibliotheksdatei, die nach einem Versionsupdate beschädigt wird.
Raptor