我将 Chart.js 用于圆环图。悬停在甜甜圈部分时，我试图显示“40% 人”，但它在“数据集”对象中显示数据，显示“40% 人：40”。如果您将鼠标悬停在甜甜圈的海军部分，您将看到数据显示。我已经尝试在数据数组上使用 javascript split 和 splice 但无法删除 : 40 。我的问题是如何为每个标签显示：“40% 人”而不是“40% 人：40”等等？
https://codepen.io/zepzia/pen/WdrWww
<div class="wrapper">
<canvas id="commitments-area" width="200" height="200"></canvas>
</div>
.wrapper {
height: 200px;
width: 200px;
margin: 0 auto;
}
var oilCanvas = document.getElementById("commitments-area");
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips;
var oilData = {
labels: [
"People (40%)",
"Aliens (32%)",
"Dogs (13%)",
"Whales (15%)"
],
datasets: [
{
data: [40, 32, 13, 15],
backgroundColor: [
"#13284a",
"#4b9cd3",
"#3b7ca7",
"#99cdec",
"#84d1ff"
]
}]
};
var chartOptions = {
legend: {
position: 'bottom'
},
animation: {
animateRotate: true,
animateScale: true
},
};
var pieChart = new Chart(oilCanvas, {
type: 'doughnut',
data: oilData,
options: chartOptions
});
这是答案，我已将 codepen 中的 js 发布在这里，请参阅更新的“选项”，代码段底部的“返回 totipLabel”部分，以获取您正在寻找的 X% 结果。
感谢http://blog.cryst.co.uk/2016/06/03/adding-percentages-chart-js-pie-chart-tooltips/为指向我在这一个正确的方向：
var oilCanvas = document.getElementById("commitments-area");
Chart.defaults.global.defaultFontSize = 12;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips;
var oilData = {
labels: [
"People",
"Aliens",
"Dogs",
"Whales"
],
datasets: [
{
data: [40, 32, 13, 15],
backgroundColor: [
"#13284a",
"#4b9cd3",
"#3b7ca7",
"#99cdec",
"#84d1ff"
]
}]
};
var chartOptions = {
legend: {
position: 'bottom'
},
animation: {
animateRotate: true,
animateScale: true
},
};
var pieChart = new Chart(oilCanvas, {
type: 'doughnut',
data: oilData,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var allData = data.datasets[tooltipItem.datasetIndex].data;
var tooltipLabel = data.labels[tooltipItem.index];
var tooltipData = allData[tooltipItem.index];
var total = 0;
for (var i in allData) {
total += allData[i];
}
var tooltipPercentage = Math.round((tooltipData / total) * 100);
return tooltipLabel + ': ' + ' ' + tooltipPercentage + '%';
}
}
}
}
});.wrapper {
height: 200px;
width: 200px;
margin: 0 auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="wrapper">
<canvas id="commitments-area" width="200" height="200"></canvas>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句