Comment afficher les valeurs de données de graphique à secteurs de chaque tranche dans chart.js

De ce que je sais je ne crois pas que Chart.JS a toutes les fonctionnalités pour aider pour la rédaction de texte sur un graphique en secteurs. Mais cela ne signifie pas que vous ne pouvez pas le faire vous-même en JavaScript natif. Je vais vous donner un exemple sur la façon de faire, ci-dessous est le code pour dessiner le texte pour chaque segment dans le diagramme circulaire:

function drawSegmentValues()
{
    for(var i=0; i<myPieChart.segments.length; i++) 
    {
        //Default properties for text (size is scaled)
        ctx.fillStyle="white";
        var textSize = canvas.width/10;
        ctx.font= textSize+"px Verdana";

        //Get needed variables
        var value = myPieChart.segments[i].value;
        var startAngle = myPieChart.segments[i].startAngle;
        var endAngle = myPieChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        //Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        //Text offside to middle of text
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

Un Graphique a un tableau de segments stockées dans PieChart.segmentsnous pouvons regarder les startAngle et endAngle de ces secteurs afin de déterminer l'angle entre les où le texte serait middleAngle. Ensuite nous diriger dans cette direction par Radius/2 pour être dans le milieu de la graphique en radians.

Dans l'exemple ci-dessus, d'autres opérations de nettoyage sont réalisées, en raison de la position de texte élaboré en fillText() étant le coin en haut à droite, nous avons besoin d'obtenir des valeurs de décalage pour corriger ça. Et enfin textSize est déterminé en fonction de la taille du graphique lui-même, plus le tableau, le plus grand le texte.

Violon Exemple

Avec une légère modification, vous pouvez modifier le nombre discret de valeurs pour un jeu de données dans le percentiles dans un graphe. Pour ce faire obtenir le montant total des value des éléments dans votre jeu de données, appelez ce totalValue. Ensuite, sur chaque segment, vous pouvez trouver l' % en faisant:

Math.round(myPieChart.segments[i].value/totalValue*100)+'%';

La section ici myPieChart.segments[i].value/totalValue est ce que calcule le pourcentage que le segment se place dans le graphique. Par exemple, si le segment en cours ayant une valeur de 50 et la totalValue était 200. Ensuite, le pourcentage que le segment a pris serait: 50/200 => 0.25. Le reste est à le rendre agréable. 0.25*100 => 25puis nous ajoutons une % à la fin. Pour tout nombre pour cent carreaux j'ai arrondi à l'entier le plus proche, bien que peut peut conduire à des problèmes de précision. Si nous avons besoin de plus de précision, vous pouvez utiliser .toFixed(n) pour enregistrer décimales. Par exemple, nous pourrions le faire pour enregistrer une seule décimale en cas de besoin:

var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
    value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';

Violon Exemple de percentile avec les décimales

Violon Exemple de percentile avec des entiers

J'ai trouvé un excellent Chart.js plugin qui fait exactement ce que vous voulez:
https://github.com/emn178/Chart.PieceLabel.js

@Hung Tran réponse fonctionne parfaitement. Comme une amélioration, je dirais ne pas l'affichage des valeurs qui sont à 0. Disons que vous disposez de 5 éléments et 2 sont 0 et le reste d'entre eux ont des valeurs, la solution ci-dessus affiche 0 et 0%. Il est préférable de filtre avec un pas égal à 0 check!

          var val = dataset.data[i];
var percent = String(Math.round(val/total*100)) + "%";
if(val != 0) {
ctx.fillText(dataset.data[i], model.x + x, model.y + y);
//Display percent in another line, line break doesn't work for fillText
ctx.fillText(percent, model.x + x, model.y + y + 15);
}

Mis à jour le code ci-dessous:

var data = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' //for legend
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
};
var pieOptions = {
events: false,
animation: {
duration: 500,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
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,
total = dataset._meta[Object.keys(dataset._meta)[0]].total,
mid_radius = model.innerRadius + (model.outerRadius - model.innerRadius)/2,
start_angle = model.startAngle,
end_angle = model.endAngle,
mid_angle = start_angle + (end_angle - start_angle)/2;
var x = mid_radius * Math.cos(mid_angle);
var y = mid_radius * Math.sin(mid_angle);
ctx.fillStyle = '#fff';
if (i == 3){ //Darker text color for lighter background
ctx.fillStyle = '#444';
}
var val = dataset.data[i];
var percent = String(Math.round(val/total*100)) + "%";
if(val != 0) {
ctx.fillText(dataset.data[i], model.x + x, model.y + y);
//Display percent in another line, line break doesn't work for fillText
ctx.fillText(percent, model.x + x, model.y + y + 15);
}
}
});               
}
}
};
var pieChartCanvas = $("#pieChart");
var pieChart = new Chart(pieChartCanvas, {
type: 'pie', //or doughnut
data: data,
options: pieOptions
});