Limita il numero di etichette sul grafico a linee Chart.js

Voglio visualizzare tutti i punti sul mio grafico dai dati che ottengo, ma non voglio visualizzare tutte le etichette per loro, perché in tal caso il grafico non è molto leggibile. Lo stavo cercando nei documenti, ma non sono riuscito a trovare alcun parametro che lo limitasse.

Ad esempio, non voglio prendere solo tre etichette, perché anche il grafico è limitato a tre punti. È possibile?

Ho qualcosa del genere in questo momento:

Se potessi lasciare ogni terza-quarta etichetta, sarebbe fantastico. Ma non ho trovato assolutamente nulla sulle opzioni delle etichette.

Prova ad aggiungere l' options.scales.xAxes.ticks.maxTicksLimitopzione:

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

Per concretezza, supponiamo che il tuo elenco originale di etichette sia simile a:

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

Se vuoi visualizzare solo ogni quarta etichetta, filtra la tua lista di etichette in modo che ogni quarta etichetta sia riempita e tutte le altre siano una stringa vuota (es ["0", "", "", "", "4", "", "", "", "8"].).

Per chiunque desideri ottenere questo risultato su Chart JS V2, funzionerà quanto segue:

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


                    var xLabels = data.ticks;

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

Quindi passare la variabile delle opzioni come al solito in un:

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

AGGIORNARE:

Ho aggiornato il mio fork con l'ultimo pull (a partire dal 27 gennaio 2014) dal ramo principale di NNick's Chart.js. https://github.com/hay-wire/Chart.js/tree/showXLabels

RISPOSTA ORIGINALE:

Per coloro che devono ancora affrontare questo problema, ho biforcato Chart.js qualche tempo fa per risolvere lo stesso problema. Puoi verificarlo su: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Ramo più vecchio! Controlla il ramo showXLabels per l'ultimo pull.

Come usare:

Applicabile al grafico a barre e al grafico a linee.

L'utente può ora passare a { showXLabels: 10 }per visualizzare solo 10 etichette (il conteggio effettivo delle etichette visualizzate potrebbe essere leggermente diverso a seconda del numero di etichette totali presenti sull'asse x, ma rimarrà comunque vicino a 10)

Aiuta molto quando c'è una grande quantità di dati. In precedenza, il grafico sembrava devastato a causa delle etichette dell'asse x disegnate l'una sull'altra nello spazio angusto. Con showXLabels, l'utente ora ha il controllo per ridurre il numero di etichette a qualunque numero di etichette si adatti bene allo spazio a sua disposizione.

Vedere le immagini allegate per un confronto.

Senza showXLabelsopzione:

Con { showXLabels: 10 }passato in opzione:

Ecco alcune discussioni su di esso: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

per la rotazione degli assi

Usa questo:

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

Secondo il numero 12 di github di chart.js . Le soluzioni attuali includono:

1. Usa 2.0 alpha (non di produzione)
2. Nascondi del tutto l'asse x quando diventa troppo affollato (non può accettare affatto)
3. controllare manualmente il salto dell'etichetta dell'asse x (non nella pagina reattiva)

Tuttavia, dopo pochi minuti, penso che ci sia una soluzione migliore.

Il seguente frammento nasconderà automaticamente le etichette . Modificandoli xLabelscon una stringa vuota prima di richiamarli draw()e ripristinarli dopo. Inoltre, è possibile applicare nuovamente le etichette x poiché c'è più spazio dopo l'oscuramento.

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

Si prega di notare che cloneè una dipendenza esterna.

ho avuto un tipo di problema simile e mi è stata data una bella soluzione per il mio problema specifico mostra l'etichetta nel suggerimento ma non nell'asse x per il grafico a linee chartjs . Vedi se questo ti aiuta

Questa risposta funziona come un incantesimo.

Se ti stai chiedendo quale sia la clonefunzione, prova questa:

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

Nel file Chart.js, dovresti trovare (sulla riga 884 per me)

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

Se hai appena avvolgere quella chiamata una linea fillTextcon if ( i % config.xFreq === 0){ ... } e poi a chart.Line.defaultsaggiungere qualcosa linea xFreq : 1si dovrebbe essere in grado di iniziare a utilizzarexFreq nel vostro optionsquando si chiamanew Chart(ctx).Line(data, options) .

Intendiamoci, questo è piuttosto hacky.