Chart.js - l'Écriture des Étiquettes à l'Intérieur des Barres Horizontales?

Dans Chart.js est-il possible d'écrire les étiquettes à l'intérieur des barres horizontales dans un "horizontalBar" graphique? Comme dans quelque chose comme:

Est quelque chose de semblable à ce possible Chart.js?

Merci!

j'ai essayé de changer les étiquettes sur la ligne graphique pour une semaine entière , cela n'a pas l'air dur , mais bonne chance

InformationsquelleAutor antonin_scalia | 2016-07-28

19

Il est maintenant sur l'option "miroir" pour que l'étiquette apparaissent à l'intérieur de la barre.

Exemple de "options de configuration" config pour un horizontalBar graphique :
```
options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}
```
Doc : http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
- Dans le tiques de la documentation, il dit que c'est uniquement pour les échelles verticales. Êtes-vous sûr qu'il fonctionne sur l'horizontale?
- Je ne peux pas vous montrer le tableau de bord que j'ai construit, mais oui, il fonctionne également pour les diagrammes à barres horizontales.
- C'est seulement en travaillant pour l'axe des y, de sorte que vous pouvez afficher uniquement vos étiquettes à l'intérieur de la des bars si elles sont alignées à l'horizontale.
InformationsquelleAutor Elie

Avec référence à la solution originale pour l'affichage des données de la valeur en utilisant HTML5 Canvas fillText() méthode dans le animation's onComplete, le code ci-dessous, vous obtiendrez ce dont vous avez besoin:

La clé pour personnaliser l'affichage quelconque tableau de données liées à l'inspection graphique du jeu de données comme dans this.data.datasets ci-dessous. Je l'ai fait par l'inspection où les différentes valeurs de ce jeu de données, ainsi que la position de place pour la fillText méthode.

Examinant le diagramme de l'ensemble de données: Image

Script (Chart.js 2.0 & jusqu'):

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; //label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

jsFiddle: http://jsfiddle.net/jfvy12h9/

un test rapide montre qu'il fonctionne. mais, les étiquettes disparaissent quand le curseur et en montrant les toopltip. toute solution pour cela?
l'ajout de hover: { animationDuration: 1 } désactive l'animation des bulles d'aide, mais résout le scintillement/sur/off problème...

InformationsquelleAutor Hung Tran

Vous pouvez obtenir cet effet dans chartjs 2.0 + en tournant les étiquettes de 90 degrés et en appliquant négatif de rembourrage, de sorte que l'étiquette se déplace vers le haut à l'intérieur de la "barre". Quelque chose comme ceci:

new Chart(document.getElementById(id), {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            maxRotation: 90,
            minRotation: 90,
            padding: -110
          }
        }
      ]
    }
  }
});

Voir le tique documentation de la configuration pour plus d'informations.

InformationsquelleAutor omnikron

0

Il semble qu'il n'y a aucune option directe de ce droit maintenant. Une possible mise en œuvre est une itération sur les barres, des colonnes en utilisant onAnimationComplete crochet. Vous pouvez afficher cette question pour les explications détaillées comment afficher les valeurs des données sur Chart.js

Je voudrais vous rappeler que cela a un inconvénient. Depuis qu'il utilise onAnimationComplete, chaque fois qu'une animation qui se passe sur le graphique, les valeurs seront disparaissent pendant une seconde et apparaissent de nouveau.

InformationsquelleAutor Kubilay Karpat

Depuis sur le "bar" graphique ne fonctionne pas, "le miroir" option...

J'ai trouvé une solution de rechange:
Violon lien

J'ai utilisé un chart.js 2.8.0 version modifiée dans ce lien

<html>
<body>
<canvas id="myChart" width="800" height="600">
</canvas>
</body>
</html>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
label: "Quota Eni mensile",
backgroundColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderColor: [
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)",
"rgba(255, 255, 153, 1)"
],
borderWidth: 1,
data: [10, 11, 18, 10, 13, 28, 12, 16]
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
ticks:{
maxRotation: 90,
minRotation: 90,
display: "top"
},          
}],
yAxes: [{
display: false
}]
},
tooltips: {
enabled: true
},
maintainAspectRatio: true,
responsive: true
}

});

Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
id: "responsiveXlabels",
beforeDraw: function(c) {
var chartHeight = c.chart.height;
var size = (chartHeight * 2.5) / 100;
var xAxis = c.scales["x-axis-0"];
xAxis.options.ticks.minor.fontSize = size;
xAxis.height = 10;
xAxis.minSize.height = 10;
c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
xAxis.margins.bottom = size * 12.5;
},
afterDraw: function(c) {
c.options.scales.xAxes[0].ticks.padding = -158;
}

});

la responsiveXlabel plugin est utilisé pour transformer un texte sur redimensionner.
Il n'y a qu'une seule chose restait à résoudre: aligner le texte au bas de l'axe.

Espère que cette aide, qui veut mettre en œuvre la mise en miroir sur l'Axe X et de satisfaire réactif demande.

InformationsquelleAutor erikthered65

Vous devez vous connecter pour publier un commentaire.