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

Lesezeit: 5 Minuten

Benutzer-Avatar
mmmm

Ich möchte alle Punkte in meinem Diagramm aus den erhaltenen Daten anzeigen, 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 Labels nehmen, denn dann ist das Diagramm auch auf drei Punkte beschränkt. Ist es möglich?

Ich habe gerade so etwas:

Geben Sie hier die Bildbeschreibung ein

Wenn ich einfach jedes dritte bis vierte Label verlassen könnte, wäre das großartig. Aber ich habe absolut nichts über Etikettenoptionen gefunden.

  • kannst du verlinken?

    – Dheeraj

    27. Februar 2014 um 12:54 Uhr

  • zur Webseite? Nein, ich mache eine App auf Android und dieses Diagramm befindet sich auf meiner lokalen Seite.

    – mmmm

    27. Februar 2014 um 14:38 Uhr

  • Bitte geben Sie an, welche Bibliothek Sie verwenden, ChartJS von DevExpress oder Chart.js?

    – Pawel Gruba

    5. März 2014 um 14:32 Uhr

  • @mmmm hast du was herausgefunden? Ich habe Nikitas Antwort unten ausprobiert, aber sie hat bei mir diese seltsame Lücke hinterlassen: jsfiddle.net/askhflajsf/xzk6sh1q

    – Mark Boulder

    8. Juni 2017 um 19:08 Uhr

  • Nikitas Antwort scheint die richtige zu sein. @mmmm, bitte markieren Sie es als die richtige Antwort stackoverflow.com/a/39326127/179138

    – Caio Cunha

    29. November 2018 um 6:34 Uhr

Benutzer-Avatar
Nikita Ag

Versuchen Sie, die hinzuzufügen options.scales.xAxes.ticks.maxTicksLimit Möglichkeit:

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

  • Die obige Antwort plus diese Antwort hier stackoverflow.com/a/37257056/558094 ist die Bombe.

    – Vinayak Garg

    1. Dezember 2016 um 7:11 Uhr

  • Da stimmt etwas nicht. Ich bekomme eine riesige Lücke zwischen den letzten beiden Ticks: jsfiddle.net/askhflajsf/xzk6sh1q

    – Mark Boulder

    8. Juni 2017 um 18:59 Uhr

  • Der Link zu den Dokumenten funktioniert nicht mehr. Konnte diese Informationen in den Dokumenten überhaupt nicht finden, aber es funktioniert 🙂

    – Daniel W.

    18. August 2017 um 14:50 Uhr

  • Woher bekommen Sie diese Informationen? Viele Antworten, die ich für Chart.js lese, kann ich in ihren Dokumenten nicht finden chartjs.org/docs/latest vermisse ich einen Ort, an dem ich all diese kleinen Eigenschaften und überschreibbaren Rückrufe dokumentiert finden kann?

    – Max Yari

    9. März 2018 um 16:28 Uhr

  • Sie können auch hinzufügen maxRotation: 0 wenn Sie möchten, dass es sich nicht dreht, bevor Sie mit dem Ablegen der Etiketten beginnen.

    – Caio Cunha

    29. November 2018 um 6:33 Uhr

Nehmen wir zur Konkretisierung an, Ihre ursprüngliche Labelliste sieht so aus:

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

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

  • Das ist ein toller Hack, danke! Ich habe es hinzugefügt hier.

    – Trufa

    4. November 2014 um 18:12 Uhr

  • Denken Sie daran, dass vorbei "" entfernt auch entsprechende Tooltips auf dem Graphen!

    – Drunter und drüber

    5. November 2014 um 1:40 Uhr

  • Wenn ich mich nicht irre, kann dies leicht mit einem Listenverständnis erfolgen, wenn Sie beispielsweise jedes 10. Etikett anzeigen möchten: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Die Zahl 10 kann natürlich zur einfacheren Parametrierung des Prozesses als Konstante am Anfang der Datei deklariert werden.

    – pkaramol

    6. April 2016 um 11:03 Uhr


  • es ginge auch ohne ""da in der Antwort auf diese Frage ein vertikales Gitterlinienproblem mit chart.js, bei dem das OP ein Problem mit einer schwarzen Linie hatte, beim ersten Auftreten dieses doppelten Anführungszeichens angezeigt wird. In diesem Fall hat es geholfen, wie @haywire erwähnte, dass es das Etikett entfernt aus dem Tooltip

    – Mi-Kreativität

    25. August 2016 um 3:33 Uhr


Für alle, die dies auf 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 options-Variable wie gewohnt in a:

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

Benutzer-Avatar
Drunter und drüber

AKTUALISIEREN:

Ich habe meinen Fork mit dem neuesten Pull (Stand: 27. Januar 2014) aus NNicks Master-Zweig Chart.js 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 geforkt, um dasselbe Problem zu lösen. Sie können es überprüfen auf:
https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Älterer Zweig! Überprüfen Sie den showXLabels-Zweig auf den neuesten Pull.

Wie benutzt man:

Anwendbar auf Balkendiagramm und Liniendiagramm.

Der Benutzer kann jetzt a passieren { showXLabels: 10 } um nur 10 Etiketten anzuzeigen (die tatsächliche Anzahl der angezeigten Etiketten kann je nach Anzahl der insgesamt auf der x-Achse vorhandenen Etiketten etwas anders sein, bleibt jedoch immer noch nahe bei 10)

Hilft sehr, wenn es eine sehr große Datenmenge gibt. Früher sah das Diagramm aufgrund der übereinander gezeichneten X-Achsen-Beschriftungen auf engstem Raum am Boden zerstört aus. Mit showXLabelshat der Benutzer nun die Kontrolle, die Anzahl der Etiketten auf eine beliebige Anzahl von Etiketten zu reduzieren, die gut in den ihm zur Verfügung stehenden Platz passen.

Siehe die beigefügten Bilder zum Vergleich.

Ohne showXLabels Möglichkeit:
Geben Sie hier die Bildbeschreibung ein

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

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

für Achsdrehung

benutze das:

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

Benutzer-Avatar
busterroni

Für Chart.js 3.3.2 können Sie den Ansatz von @Nikita Ag mit einigen Änderungen verwenden. Sie können die überprüfen Dokumentation. Stellen ticks in xAxis in scales. Beispiel:

...
options: {
    scales: {
        xAxis: {
            ticks: {
                maxTicksLimit: 10
            }
        }
    }
}
...

Benutzer-Avatar
Wyschnav MK

In chart.js 3.2.0

options: {
    scales: {
      x: {
        ticks: {
            maxTicksLimit: 10
            }
        }
     }
 }

1226160cookie-checkBegrenzen Sie die Anzahl der Beschriftungen im Liniendiagramm von Chart.js

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy