web-dev-qa-db-fra.com

Limiter le nombre d'étiquettes sur le graphique en courbes Chart.js

Je souhaite afficher tous les points de mon graphique à partir des données que je reçois, mais je ne souhaite pas afficher toutes les étiquettes associées, car 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 le graphique est également limité à trois points. C'est possible?

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

enter image description here

Si je pouvais juste laisser tous les troisièmes labels, ce serait génial. Mais je n'ai absolument rien trouvé sur les options d'étiquettes.

javascriptcsscanvaschartschart.js
74
mmmm

Essayez d'ajouter le options.scales.xAxes.ticks.maxTicksLimit option:

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

Pour être concret, supposons que votre liste originale d'étiquettes ressemble à ceci:

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

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

17
ben

UPDATE:

J'ai mis à jour mon fork avec la dernière extraction (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 créé 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 de showXLabels pour la dernière extraction.

Comment utiliser:

Applicable aux graphiques à barres et graphiques linéaires.

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

Cela aide beaucoup quand il y a une très grande quantité de données. Auparavant, le graphe semblait dévasté à cause d'étiquettes d'axe x superposées dans un espace restreint. Avec showXLabels, l’utilisateur a maintenant le contrôle de réduire le nombre d’étiquettes à n’importe quel nombre d’étiquettes convenant à l’espace disponible.

Voir les images ci-jointes pour une comparaison.

Sans l'option showXLabels: enter image description here

Avec { showXLabels: 10 } passé en option: enter image description here

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

13
Haywire

Pour ceux qui cherchent à atteindre cet objectif sur le graphique 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] = '';
                        }
                    });
                } 
            }]   
        }
}

Puis passez la variable d’option comme d’habitude dans un:

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

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

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

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

L'extrait suivant masque les étiquettes automatiquement . En modifiant xLabels avec une chaîne vide avant d'appeler draw() et de les restaurer ensuite. Encore plus, il est possible d'appliquer une nouvelle rotation des étiquettes x car il y a plus d'espace après la dissimulation.

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 que clone est une dépendance externe.

2
yegong

j'ai eu un type de problème similaire, et on m'a donné une solution de Nice à mon problème spécifique affichez l'étiquette dans l'info-bulle, mais pas dans l'axe des x pour le graphique à courbes chartjs . Voyez si cela vous aide

1
vsank7787

Cette réponse fonctionne à merveille.

Si vous vous interrogez sur la fonction clone, essayez celle-ci:

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