Ik heb met chart.js 1.0 gewerkt en in de tooltips van mijn donutdiagram werden percentages weergegeven op basis van gegevens gedeeld door dataset, maar ik kan dit niet repliceren met grafiek 2.0.
Ik heb hoog en laag gezocht en geen werkende oplossing gevonden. Ik weet dat het onder opties zal vallen, maar alles wat ik heb geprobeerd heeft de taart op zijn best disfunctioneel gemaakt.
<html>
<head>
<title>Doughnut Chart</title>
<script src="../dist/Chart.bundle.js"></script>
<script src="https://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>
Antwoord 1, autoriteit 100%
Update:het onderstaande antwoord toont een percentage op basis van totale gegevens, maar @William Surya Permanaheeft een uitstekend antwoord dat wordt bijgewerkt op basis van de getoonde gegevens https://stackoverflow.com/a/49717859/2737978
In optionskun je een tooltipsobject doorgeven (meer kun je lezen op de chartjs-documenten)
Een veld van tooltips, om het gewenste resultaat te krijgen, is een callbacks-object met een label-veld. labelzal een functie zijn die het tooltip-item opneemt waar u de muisaanwijzer op hebt gehouden en de gegevens waaruit uw grafiek bestaat. Retourneer gewoon een tekenreeks die u in de knopinfo wilt gebruiken vanuit deze functie.
Hier is een voorbeeld van hoe dit eruit kan zien
tooltips: {
terugbellen: {
label: functie(tooltipItem, data) {
// haal de betreffende dataset op
var dataset = data.datasets[tooltipItem.datasetIndex];
// bereken het totaal van deze dataset
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {