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

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:

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

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

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

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

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

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:

Mit { showXLabels: 10 }übergeben in Option:

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

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
            }
          }
        ]
      }

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.

Ich hatte eine ähnliche Art von Problem und erhielt eine nette Lösung für mein spezielles Problem- Show-Label im Tooltip, aber nicht in der x-Achse für das Liniendiagramm von chartjs . Sehen Sie, ob dies Ihnen hilft

Diese Antwort wirkt wie ein Zauber.

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

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

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.