Chart.js/Ng-charts堆叠条形图-在条形图上显示百分比,但在工具提示上显示实际值

r1zhe5dt  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(138)

我有下面的代码,它循环遍历一个键数组,并在每个键上绘制第1组和第2组的得分。
我希望堆叠条形图显示百分比(每组有不同数量的人计算百分比),所以我已经计算出百分比,并将它们推入数据数组。
对于工具提示,我希望它显示实际值(而不是百分比),所以我为工具提示制作了一个actualValue数组。

  1. for (let key of this.keys) {
  2. subject.stackedChartData.push({
  3. data: [
  4. ((subject[key.label + "Group 1"] / this.totalNumberOfGroup1) * 100).toFixed(0),
  5. ((subject[key.label + "Group 2"] / this.totalNumberOfGroup2) * 100).toFixed(0),
  6. ],
  7. label: key.label,
  8. actualValue: [subject[key.label + "Group 1"], subject[key.label + "Group 2"]],
  9. });
  10. }

我的问题是,如何让工具提示显示实际值而不是数据百分比值。
我试着将其添加到stackedChartOptions中,它确实显示了actualValue,但它们都在组1和组2的长列表中,而不是只显示我悬停在上面的那一个

  1. tooltips: {
  2. mode: "label",
  3. callbacks: {
  4. label: (tooltipItem, data) => {
  5. return data.datasets[tooltipItem.datasetIndex].actualValue;
  6. },
  7. },
  8. },
7nbnzgx9

7nbnzgx91#

将数组作为一个要返回的对象进行定位,如果只想返回单个值,则还需要如下定位:

  1. label: (tooltipItem, data) => {
  2. return data.datasets[tooltipItem.datasetIndex].actualValue[tooltipItem.dataIndex];
  3. },

相关问题