Chart.js 2.0 beignet info-bulle pourcentages
J'ai travaillé avec chart.js 1.0 et a mon graphique en anneau de l'affichage des info-bulles des pourcentages basés sur les données divisée par jeu de données, mais je ne suis pas en mesure de reproduire cela avec le diagramme 2.0.
J'ai cherché haut et bas et n'ont pas trouvé une solution qui fonctionne. Je sais qu'il va aller dans les options, mais tout ce que j'ai essayé a fait la tarte dysfonctionnel au mieux.
<html>
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div id="canvas-holder" style="width:75%">
<canvas id="chart-area" />
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
486.5,
501.5,
139.3,
162,
263.7,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Expenditures'
}],
labels: [
"Hospitals: $486.5 billion",
"Physicians & Professional Services: $501.5 billion",
"Long Term Care: $139.3 billion",
"Prescription Drugs: $162 billion",
"Other Expenditures: $263.7 billion"
]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
title: {
display: false,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config);{
}
};
</script>
</body>
</html>
Vous devez vous connecter pour publier un commentaire.
Mise à jour: La réponse ci-dessous montre un pourcentage basé sur le nombre total de données mais
@William Surya Permana
a une excellente réponse que les mises à jour basé sur l'montré données https://stackoverflow.com/a/49717859/2737978Dans
options
vous pouvez passer unetooltips
objet (plus peut être lu à la chartjs docs)Un champ de
tooltips
, pour obtenir le résultat que vous voulez, c'est uncallbacks
objet avec unlabel
champ.label
sera une fonction qui prend dans l'info-bulle qui vous ont survolé et les données qui rend votre graphique. Il suffit de retourner une chaîne de caractères, que vous voulez aller dans l'info-bulle, à partir de cette fonction.Voici un exemple de ce que cela peut ressembler à
et un exemple complet avec les données que vous avez fournies
violon
JS:
HTML:
return data.labels[tooltipItem.datasetIndex] + ": " + percentage + "%"
Pour ceux qui veulent affichage dynamique des pourcentages basés sur ce qui est actuellement affichée sur le graphique (pas basée sur le nombre de données), vous pouvez essayer ce code:
percentage
est orthographié droitChartkick.charts['<your_chart_id>'].getChartObject().tooltip._options.callbacks
.label
ettitle
sont des sous-attributs qui peuvent être définies à partir de là.