悬停时从Chart.js中删除数据文本
悬停时从Chart.js中删除数据文本
提问于 2018-01-05 14:44:56
我用Chart.js做甜甜圈图。在甜甜圈区域的悬停中，我试图显示'People 40%‘，但是它在’data data‘对象中显示数据，显示'People 40%：40’。如果你在甜甜圈的海军部分悬停，你会看到数据显示。我尝试过在数据数组上进行javascript拆分和拼接，但是无法让它删除: 40。我的问题是如何显示：“People 40%”而不是“People 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
});回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-09 05:29:32
答案是，我在这里发布了代码页中的js，查看更新的“选项”，在代码段底部的“返回tootipLabel”部分，以获得您正在寻找的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48115868
复制相关文章
相似问题
腾讯云开发者
