Limiter le numéro d'étiquette sur le diagramme de ligne Chart.js

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

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

Pour le concret, disons que votre liste originale d'étiquettes ressemble à:

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

Si vous souhaitez seulement afficher toutes les 4 étiquettes, filtrer votre liste d'étiquettes afin que chaque 4ème étiquette soit remplie et que toutes les autres soient la chaîne vide (p. Ex. ["0", "", "", "", "4", "", "", "", "8"] ).

METTRE À JOUR:

J'ai mis à jour mon fourchette avec la dernière traction (à partir du 27 janvier 2014) de la branche maîtresse Chart.js de NNick. https://github.com/hay-wire/Chart.js/tree/showXLabels

RÉPONSE ORIGINALE:

Pour ceux qui sont encore confrontés à ce problème, j'ai fourré Chart.js un peu de temps pour résoudre le même problème. Vous pouvez le consulter sur: https://github.com/hay-wire/Chart.js/tree/skip-xlabels => Branche plus ancienne! Vérifiez la branche showXLabels pour la dernière extraction.

Comment utiliser:

Applicable au diagramme à barres et au diagramme linéaire.

L'utilisateur peut maintenant passer un { 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 d'étiquettes totales présentes sur les axes x, mais il reste encore près de 10)

Aide beaucoup quand il y a une très grande quantité de données. Auparavant, le graphique utilisé paraissait dévastateur en raison des étiquettes des axes x tracés les uns sur les autres dans l'espace à l'étroit. Avec showXLabels , l'utilisateur a maintenant le contrôle pour réduire le nombre d'étiquettes quel que soit le nombre d'étiquettes qui correspondent bien à l'espace disponible pour lui.

Voir les images ci-jointes pour une comparaison.

Sans option showXLabels :

Avec { showXLabels: 10 } passé à l'option:

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

Pour ceux qui cherchent à le faire sur le diagramme JS V2, le suivant 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 a:

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

Selon le tableau.js github numéro 12 . Les solutions actuelles incluent:

1. Utilisez l'alpha 2.0 (pas la production)
2. Masquer l'axe des abscisses quand il devient trop foule (ne peut pas accepter du tout)
3. Échec de l'étiquette de commande manuelle de l'axe des x (pas dans la page adaptée)

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

L'extrait suivant cachera les étiquettes automatiquement . En modifiant xLabels avec chaîne vide avant d'invoquer draw() et de les restaurer après alors. Encore plus, les étiquettes x de rotation peut être appliquée 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; } }); 

Notez que le clone est une dépendance externe.

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

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

Si vous fillText simplement un appel de ligne pour fillText avec if ( i % config.xFreq === 0){ ... } puis dans chart.Line.defaults ajouter quelque chose line xFreq : 1 vous devriez pouvoir utiliser xFreq Dans vos options lorsque vous appelez le new Chart(ctx).Line(data, options) .

Je tiens à penser que c'est très difficile.

J'ai eu un problème similaire, et j'ai reçu une bonne solution à mon libellé d'émission spécifique dans la info-bulle, mais pas dans l'axe des x pour le diagramme de lignes de chartjs . Voyez si cela vous aide

Cette réponse fonctionne comme un charme.

Si vous vous demandez la fonction clone , essayez celle-ci:

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