J'ai récemment mis à jour ma bibliothèque charts.js vers la version la plus récente (2.5.0). Cette version ne montre pas les étiquettes sur le graphique.
J'ai un exemple de travail sur le violoneux: http://jsfiddle.net/g6fajwg8 .
Cependant, j'ai défini mon graphique exactement comme dans l'exemple mais je ne peux toujours pas voir les étiquettes sur le graphique.
Remarque: Il y a beaucoup de questions comme celle-ci sur Google et Stackoverflow, mais la plupart d'entre elles concernent des versions précédentes, qui fonctionnent bien sur celles-ci.
var config = {
type: 'pie',
data: {
datasets: [{
data: [
1200,
1112,
533,
202,
105,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Dataset 1'
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Dark Grey"
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.pPercentage = new Chart(ChartContext, config);
Il semble qu’il n’existe aucune option de construction de ce type.
Cependant, il existe une bibliothèque spéciale pour cette option, elle appelle: " Chart PieceLabel ".
Voici leur démo .
Après avoir ajouté leur script à votre projet, vous voudrez peut-être ajouter une autre option, appelée "pièceLabel", et définir les valeurs des propriétés à votre guise:
pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,
// precision for percentage, default is 0
precision: 0,
// font size, default is defaultFontSize
fontSize: 18,
// font color, default is '#fff'
fontColor: '#fff',
// font style, default is defaultFontStyle
fontStyle: 'bold',
// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}