Limiter le nombre d'étiquettes sur le graphique linéaire Chart.js

Je veux afficher tous les points de mon graphique à partir des données que j'obtiens, mais je ne veux pas afficher toutes les étiquettes pour eux, car alors le graphique n'est pas très lisible. Je le cherchais dans la documentation, mais je n'ai trouvé aucun paramètre qui limiterait cela.

Je ne veux pas prendre seulement trois étiquettes par exemple, car alors le graphique est également limité à trois points. C'est possible?

J'ai quelque chose comme ça en ce moment:

Si je pouvais simplement quitter un label sur trois, ce serait génial. Mais je n'ai absolument rien trouvé sur les options d'étiquettes.

Essayez d'ajouter l' options.scales.xAxes.ticks.maxTicksLimitoption:

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

Pour plus de précision, disons que votre liste originale d'étiquettes ressemble à:

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

Si vous ne voulez afficher qu'une étiquette sur 4, filtrez votre liste d'étiquettes de manière à ce qu'une étiquette sur 4 soit remplie et que toutes les autres soient la chaîne vide (par exemple ["0", "", "", "", "4", "", "", "", "8"]).

Pour tous ceux qui cherchent à atteindre cet objectif sur Chart JS V2, ce qui suit fonctionnera:

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


                    var xLabels = data.ticks;

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

Ensuite, passez la variable d'options comme d'habitude dans un:

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

METTRE À JOUR:

J'ai mis à jour ma fourche avec le dernier pull (au 27 janvier 2014) de la branche principale Chart.js de NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

RÉPONSE ORIGINALE:

Pour ceux qui sont toujours confrontés à ce problème, j'ai bifurqué Chart.js il y a quelque temps pour résoudre le même problème. Vous pouvez le vérifier sur: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Ancienne branche! Vérifiez la branche showXLabels pour le dernier pull.

Comment utiliser:

Applicable aux graphiques à barres et aux graphiques en courbes.

L'utilisateur peut maintenant passer a { showXLabels: 10 }pour afficher seulement 10 étiquettes (le nombre réel d'étiquettes affichées peut être un peu différent en fonction du nombre total d'étiquettes présentes sur l'axe x, mais il restera néanmoins proche de 10)

Aide beaucoup lorsqu'il y a une très grande quantité de données. Auparavant, le graphique avait l'air dévasté en raison des étiquettes de l'axe des x dessinées les unes sur les autres dans l'espace restreint. Avec showXLabels, l'utilisateur a maintenant le contrôle pour réduire le nombre d'étiquettes à n'importe quel nombre d'étiquettes qui s'intègrent bien dans l'espace dont il dispose.

Voir les images ci-jointes pour une comparaison.

Sans showXLabelsoption:

Avec { showXLabels: 10 }passé en option:

Voici quelques discussions à ce sujet: https://github.com/nnnick/Chart.js/pull/521#issuecomment-60469304

pour la rotation de l'axe

utilisez ceci:

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

Selon le numéro 12 de github de chart.js . Les solutions actuelles comprennent:

1. Utilisez 2.0 alpha (pas de production)
2. Masquer du tout l'axe des x lorsqu'il devient trop fréquenté (ne peut pas du tout accepter)
3. contrôler manuellement le saut d'étiquette de l'axe x (pas dans la page réactive)

Cependant, après quelques minutes, je pense qu'il y a une meilleure solution.

L'extrait suivant masquera automatiquement les étiquettes . En modifiant xLabelsavec une chaîne vide avant de les invoquer draw()et restaurez-les ensuite. De plus, la re-rotation des étiquettes x peut être appliquée car il y a plus d'espace après le masquage.

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

Veuillez noter qu'il clones'agit d'une dépendance externe.

J'ai eu un type de problème similaire et j'ai reçu une bonne solution à mon étiquette d'exposition de problème spécifique dans l'info-bulle, mais pas sur l'axe des x pour le graphique en courbes chartjs . Voyez si cela vous aide

Cette réponse fonctionne comme un charme.

Si vous vous interrogez sur la clonefonction, essayez celle-ci:

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

Dans le fichier Chart.js, vous devriez trouver (à la ligne 884 pour moi)

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

Si vous conclure qu'un appel à la ligne fillTextavec if ( i % config.xFreq === 0){ ... } puis en chart.Line.defaultsajouter le nom de quelque chose que xFreq : 1vous devriez être en mesure de commencer à utiliser xFreqdans votre optionsquand vous appelez new Chart(ctx).Line(data, options).

Remarquez que c'est assez hacky.