Chart.js v2: Comment faire les info-bulles apparaissent toujours sur un camembert?
J'ai trouvé des questions similaires dans le Débordement de la Pile, mais tous ont été adressées à un et deux ans. Maintenant Chart.js a venir dans la version 2, et beaucoup de la documentation des changements. Quelqu'un peut-il aider s'il vous plaît me montrer un exemple de graphique à secteurs avec des étiquettes ou un camembert avec l'ensemble de sa catégorie, les info-bulles sont visibles?
Mise à JOUR
Grâce à @potatopeelings, sa réponse fonctionne parfaitement pour Chart.js v2.1.
Bien que j'ai d'abord demandé comment faire pour toujours afficher les info-bulles du camembert ici, j'ai trouvé une meilleure solution: l'affichage des valeurs des étiquettes dans les pourcentages! Il est maintenant activée pour un camembert dans Chart.js v2.1. Dans les options du graphique:
animation: {
duration: 0,
onComplete: function () {
var self = this,
chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '18px Arial';
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
var meta = self.getDatasetMeta(datasetIndex),
total = 0, //total values to compute fraction
labelxy = [],
offset = Math.PI / 2, //start sector from top
radius,
centerx,
centery,
lastend = 0; //prev arc's end line: starting with 0
for (var val of dataset.data) { total += val; }
Chart.helpers.each(meta.data.forEach( function (element, index) {
radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
centerx = element._model.x;
centery = element._model.y;
var thispart = dataset.data[index],
arcsector = Math.PI * (2 * thispart / total);
if (element.hasValue() && dataset.data[index] > 0) {
labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
}
else {
labelxy.push(-1);
}
lastend += arcsector;
}), self)
var lradius = radius * 3 / 4;
for (var idx in labelxy) {
if (labelxy[idx] === -1) continue;
var langle = labelxy[idx],
dx = centerx + lradius * Math.cos(langle),
dy = centery + lradius * Math.sin(langle),
val = Math.round(dataset.data[idx] / total * 100);
ctx.fillText(val + '%', dx, dy);
}
}), self);
}
},
- Je pense que c'est ce que vous cherchez. stackoverflow.com/questions/25661197/...
- Salut, merci de prendre votre temps. Malheureusement, cet exemple est à l'aide de chart.js v1.0.2. Les structures de données et les configurations sur les v2 sont différents de v1
- Je voudrais utiliser celui-ci: github.com/chartjs/chartjs-plugin-datalabels. Ce plugin devrait faire ce que vous voulez.
Vous devez vous connecter pour publier un commentaire.
Solution pour ChartJs Version > 2.1.5:
Avec la nouvelle Chart.js 2.1 vous pouvez écrire un plugin pour le faire et de le contrôler via un
options
propriétéAperçu
Script
Noter que vous devez vous inscrire sur le plugin avant d'initialiser le tableau
et puis
Avec l'ancienne 2.x version, vous devez déplacer le même (ou un similaire, je ne suis pas sûr de savoir le plus tôt structure de données ) à la
options.animation.onComplete
Violon http://jsfiddle.net/q15ta78q/
_options : chart.options
à_options : chart.options.tooltips
-J'étais à la recherche de solution similaire et est venu à travers ce chartjs plugin Chart.PieceLabel.js. Il a configs pour les modes d'affichage d'étiquettes, de la valeur et en pourcentage.