我有以下代码循环遍历一组键并在每个键上绘制第 1 组和第 2 组的分数。
我希望堆积条形图显示百分比(每个组有不同数量的人来计算百分比),所以我计算出百分比并将它们推入数据数组。
对于工具提示,我希望它显示实际值(而不是百分比),所以我为工具提示制作了一个 actualValue 数组。
for (let key of this.keys) {
subject.stackedChartData.push({
data: [
((subject[key.label + "Group 1"] / this.totalNumberOfGroup1) * 100).toFixed(0),
((subject[key.label + "Group 2"] / this.totalNumberOfGroup2) * 100).toFixed(0),
],
label: key.label,
actualValue: [subject[key.label + "Group 1"], subject[key.label + "Group 2"]],
});
}
我的问题是,如何让工具提示显示实际值而不是数据百分比值。
我尝试将它添加到我的stackedChartOptions,它确实显示了actualValue,但它们都在第1组和第2组的长列表中,而不仅仅是我悬停的那个
tooltips: {
mode: "label",
callbacks: {
label: (tooltipItem, data) => {
return data.datasets[tooltipItem.datasetIndex].actualValue;
},
},
},
您将数组定位为要返回的一个对象,如果您只想返回单个值,您还需要像这样定位它:
label: (tooltipItem, data) => {
return data.datasets[tooltipItem.datasetIndex].actualValue[tooltipItem.dataIndex];
},
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句