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

测试用户

我有以下代码循环遍历一组键并在每个键上绘制第 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章