如何操作Chart.js饼图的特定工具提示值?
问题描述:
我成功显示了从Chart.js
开始的饼图。如果我悬停给定的切片,它也将返回标签以及值。如何操作Chart.js饼图的特定工具提示值?
但是,价值不是非常人性化;我想将其转换为另一个值,对用户更易于理解。
如何访问给定切片的工具提示值?我似乎只能得到他们。
示例代码:
this.examplePieChart = new Chart(ctx1,{
type: 'pie',
data: {
labels: byteLabels,
datasets: [
{
label: 'bytes',
data: BytesArr,
backgroundColor: defaultChartColors,
},
]
},
options: {
tooltips: {
mode: 'label',
}
}
});
我可以访问工具提示数据的所有值,我的尝试是这样的:
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItem, data) {
let tmpArr = [];
for(let i = 0; i < data.datasets[0].data.length; i++){
tmpArr.push(data.datasets[0].data[i].fileSize());
}
return tmpArr;
}
}
}
如果我运行fileSize()
以字节转换为MIB /昆明植物研究所。它可以工作 - 但是,当悬停一个切片时,它会显示任何给定切片上的所有工具提示,而不是我正在盘旋的那个切片。
如何访问饼图中单个给定切片的数据值并对其进行操作?目前,我只能使用data
值访问它们,它返回整个数组。
如果没有上面的回调,我成功地展示label: value
,但我想操纵每个片这种特定的值 - 不是所有的值一次:O)
答
到底
,它可以像这样访问:
tooltips: {
mode: 'label',
callbacks: {
const currentValue = dataset.data[tooltipItem.index];
return currentValue.fileSize();
}
}
}