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

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

我有下面的代码,它循环遍历一个键数组,并在每个键上绘制第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;
        },
      },
    },
7nbnzgx9

7nbnzgx91#

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

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

相关问题