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


95

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:

entrez la description de l'image ici

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.


pouvez-vous fournir un lien?
Dheeraj

au site Web? non, je fais une application sur Android et ce graphique est sur ma page locale ..
mmmm

Veuillez spécifier quelle bibliothèque utilisez-vous, ChartJS par DevExpress ou Chart.js?
Pavel Gruba

@mmmm avez-vous trouvé quelque chose? J'ai essayé la réponse de Nikita ci-dessous mais cela m'a laissé avec cette étrange lacune: jsfiddle.net/askhflajsf/xzk6sh1q
Mark Boulder

La réponse de Nikita semble être la bonne. @mmmm, pensez à le marquer comme la bonne réponse stackoverflow.com/a/39326127/179138
Caio Cunha

Réponses:


150

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

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

4
La réponse ci-dessus plus cette réponse ici stackoverflow.com/a/37257056/558094 , est la bombe.
Vinayak Garg

3
Quelque chose cloche ici. J'obtiens
Mark Boulder

2
D'où proviennent ces informations? Beaucoup de réponses que je lis pour Chart.js - je ne peux pas trouver dans leur documentation chartjs.org/docs/latest , est-ce que je manque un endroit où je peux trouver toutes ces petites propriétés et ces rappels remplaçables documentés?
Max Yari

1
monsieur, vous êtes génial!
Jay Geeth

1
Vous pouvez également ajouter maxRotation: 0si vous souhaitez qu'il ne tourne pas avant de commencer à déposer les étiquettes.
Caio Cunha

22

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


C'est un super hack, merci! Je l'ai ajouté ici .
Trufa

40
N'oubliez pas que le passage ""supprime également les info-bulles correspondantes sur le graphique!
Haywire

3
À moins que je me trompe , cela peut être fait facilement avec une compréhension de la liste si vous voulez par exemple pour montrer tous les 10 étiquette: my_labels = [my_labels[i] if i % 10 == 0 else "" for i in range(len(my_list))]. Le nombre 10 peut bien sûr être déclaré comme une constante au début du fichier pour un paramétrage plus facile du processus.
pkaramol

cela pourrait également être fait sans "", comme dans la réponse à cette question problème de ligne de ceinture verticale avec chart.js où l'OP avait un problème avec la ligne noire apparaît sur la première occurrence de cette double guillemet, dans ce cas, cela a aidé, encore une fois comme @ haywire a mentionné qu'il supprime l'étiquette de l'infobulle
Mi-Creativity

15

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

13

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: entrez la description de l'image ici

Avec { showXLabels: 10 }passé en option: entrez la description de l'image ici

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


J'adorerais l'utiliser mais je dois faire quelque chose de mal. J'ai fait référence à github.com/hay-wire/Chart.js/blob/showXLabels/Chart.js mais (au 30 octobre 2015) cela ne fonctionne pas et ne contient même pas l'expression «showXLabels». L'ancien, sur github.com/hay-wire/Chart.js/blob/skip-xlabels/Chart.js , fonctionne très bien. J'adorerais obtenir une version fonctionnelle et étiquetée de la dernière afin que je puisse la lier en toute sécurité par CDN à partir de RawGit. Ce violon (bien qu'il ne soit pas distillé uniquement pour le problème) montre ce que je veux dire: jsfiddle.net/45cLcxdh/14
rkagerer

J'ai essayé de l'utiliser mais il semble que 'Chart.Line.js' ne soit pas utilisé, donc rien ne change. J'ai utilisé "new Chart (ctx) .Line (data, options);" pour créer un graphique.
FlyingNimbus

L'utilisation de Chart JS 2.6.0 et de l'option ne fonctionne pas. Finalement, j'ai dû utiliser la réponse de @ ben stackoverflow.com/a/26183983/3319454
3bdalla

1
Je pense que cela fait partie d'une version précédente
alexalejandroem

@alexalejandroem Oui, cela a été répondu en 2014! ;-)
Haywire

3

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

2

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.



0

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

-1

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.


3
ne modifiez jamais le fichier de bibliothèque d'origine, qui se cassera après une mise à jour de version.
Raptor
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.