Javascript Girl
  1. Javascript Girl
  3. Masquer les étiquettes sur l'axe des x ChartJS
Intereting Posts
Comment puis-je obtenir Knockout JS à la liaison de données sur la touche à la place de la perte de focus? Fuite de mémoire Javascript lors de la modification des données du modèle dans KnockoutJS Comment exécuter les promesses séquentiellement, en passant les paramètres à partir d'un tableau? Comment simuler un survol avec un contact tactile sur les navigateurs activés? Erreur lors du passage d'une variable non définie à fonctionner? Récupère la liste de toutes les étiquettes dans le blogueur Rafraîchir dynamiquement une partie du modèle lorsqu'une variable est mise à jour. Golang Comment écrire ce code JavaScript sans eval? Comment changer une image de texture d'un modèle 3d (maya) en trois.js au moment de l'exécution Le retour du navigateur agit sur l'iframe imbriqué avant la page elle-même – existe-t-il un moyen de l'éviter? Comment puis-je faire mon fichier .htaccess permettre à Safari et d'autres navigateurs d'ouvrir GZIP? Comment configurer les origines socket.io pour restreindre les connexions à une seule URL Comment désactiver JavaScript par programme uniquement pour Internet Explorer 7? Que moi-même ou moi-même, lequel prefere-t-il en JavaScript? Comment mettre à jour le texte pop-up bootstrap?

Masquer les étiquettes sur l'axe des x ChartJS

Je souhaite masquer les étiquettes sur l'axe des x car j'ai une solution à configurer

$scope.labels = ['', '', '', '', '', '', ''];

Mais dans ce cas, les étiquettes sont également cachées sur la info-bulle. Ce que je veux, c'est montrer les étiquettes sur les barres, mais je ne veux pas montrer ces étiquettes sur l'axe des x. Comme il dérange également mon UX aussi bien que la largeur des graphiques est trop faible.

J'ai passé trop de temps à ce sujet mais je n'ai pas trouvé de solution pour éliminer les étiquettes des axes x. Aidez-moi ici …

    Vous pouvez étendre le graphique pour le faire, de la même manière 

     Chart.types.Bar.extend({ name: "BarAlt", initialize: function(data){ Chart.types.Bar.prototype.initialize.apply(this, arguments); var xLabels = this.scale.xLabels; for (var i = 0; i < xLabels.length; i++) xLabels[i] = ''; } });

    Et l'appeler ainsi 

     var myBarChart = new Chart(ctx).BarAlt(data);

    Fiddle – http://jsfiddle.net/kq3utvnu/

    Merci @Samuele pour le souligner! Pour les étiquettes vraiment longues, vous devez définir les étiquettes sur quelque chose de plus court et ensuite les remettre aux original (dans les éléments du diagramme) afin qu'aucun espace ne soit occupé sous l'axe x pour les étiquettes. 

     Chart.types.Bar.extend({ name: "BarAlt", initialize: function(data){ var originalLabels = data.labels; data.labels = data.labels.map(function() { return '' }); Chart.types.Bar.prototype.initialize.apply(this, arguments); this.datasets[0].bars.forEach(function(bar, i) { bar.label = originalLabels[i]; }); var xLabels = this.scale.xLabels; for (var i = 0; i < xLabels.length; i++) xLabels[i] = ''; } });

    Fiddle – http://jsfiddle.net/nkbevuoe/

    J'ai pu cacher les étiquettes sur l'axe des x, tout en conservant le titre dans la info-bulle en procédant comme suit:

    • Dans les données du graphique: labels: [""]
    • Dans les options de graphique, ajoutez object.label = "ToolTipTitle"; Avant la ligne spécifiant les valeurs qui doivent être retournées