ChartJS：使用正文中的总和调整工具提示

Question

我现在有以下输出：

但是，我想要以下内容table：

最少：90
25：95
第 25 至中位数：100
（蓝色的我不想展示）
第 75 名：105
最多：110

我有以下代码，希望这些足够了：

const data = {
  labels: [
    REMockProducts[0].valuations[0].short,
    REMockProducts[0].valuations[1].short,
    REMockProducts[0].valuations[2].short,
    REMockProducts[0].valuations[3].short,
    REMockProducts[0].valuations[4].short,
    REMockProducts[0].valuations[5].short,
    REMockProducts[0].valuations[6].short,
  ],
  datasets: [
    {
      label: "Minimum",
      data: [
        REMockProducts[0].valuations[0].min,
        REMockProducts[0].valuations[1].min,
        REMockProducts[0].valuations[2].min,
        REMockProducts[0].valuations[3].min,
        REMockProducts[0].valuations[4].min,
        REMockProducts[0].valuations[5].min,
        REMockProducts[0].valuations[6].min,
      ],
      toCheck: 0,
    },
    {
      label: "25th",
      data: [
        lwpercDistance(0, 0)[0],
        lwpercDistance(0, 1)[0],
        lwpercDistance(0, 2)[0],
        lwpercDistance(0, 3)[0],
        lwpercDistance(0, 4)[0],
        lwpercDistance(0, 5)[0],
        lwpercDistance(0, 6)[0],
      ],
      toCheck: 1,
    },
    {
      label: "25th to Median",
      data: [
        medianDistance(0, 0)[0],
        medianDistance(0, 1)[0],
        medianDistance(0, 2)[0],
        medianDistance(0, 3)[0],
        medianDistance(0, 4)[0],
        medianDistance(0, 5)[0],
        medianDistance(0, 6)[0],
      ],
      toCheck: 2,
    },
    {
      label: false,
      data: [0, 0, 0, 0, 0, 0, 0],
      toCheck: 3,
    },
    {
      label: "75th",
      data: [
        hipercDistance(0, 0)[0],
        hipercDistance(0, 1)[0],
        hipercDistance(0, 2)[0],
        hipercDistance(0, 3)[0],
        hipercDistance(0, 4)[0],
        hipercDistance(0, 5)[0],
        hipercDistance(0, 6)[0],
      ],
      toCheck: 4,
    },
    {
      label: "Max",
      data: [
        maxDistance(0, 0)[0],
        maxDistance(0, 1)[0],
        maxDistance(0, 2)[0],
        maxDistance(0, 3)[0],
        maxDistance(0, 4)[0],
        maxDistance(0, 5)[0],
        maxDistance(0, 6)[0],
      ],
      toCheck: 5
    },
  ],
};

[...] <Bar
        data={data}
        options={{
          plugins: {
            legend: {
              position: "top",
            },
            tooltips: {
              callbacks: {
                label : function(data, tooltip) {
                  let k = 0;
                  let j = 0;
                  for (k; k < 5; k++) {
                    for (j; j < 7; j++) {
                      if (k > 0) {
                        let tooltip =
                          data.datasets[0].data[j] + data.datasets[k].data[j];
                      } else {
                        let tooltip = data.datasets[0].data[j];
                      }
                    }
                    return { text: tooltip };
                  }
                },
              },
            },
          },
          indexAxis: "y",
          scales: {
            x: {
              stacked: true,
              ticks: {
                autoSkip: false,
              },
            },
            y: {
              stacked: true,
              ticks: {
                autoSkip: false,
              },
            },
          },
        }}
      />

很明显我对 JS 中的嵌套循环缺乏经验。基本思想是运行遍历每个数据集，然后取“最小”数据的面值或将它们相加。将鼠标悬停在我的 tooltip 变量上实际上显示以下内容：

我显然必须犯一个我无法弄清楚的明显错误。

到目前为止对我有帮助的链接：

If condition not working for ChartJS

[编辑] 其实我刚刚意识到我算错了。不过变化不大

Answer 1

基本上你的问题分为两部分。

过滤 0 个值
将累计和添加到工具提示中的每个数据点

我简化了你的代码，因为你有一个不需要的 for 循环，因为它可以在 Chart JS 工具提示中完成。

我制作了一个包含完整故障和解释的视频。您可以在这里观看以获得更多理解：ChartJS: Adjust Tooltip with sums in body

查看下面的代码：

<script>
  // setup 
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    },{
      label: '# of Cost',
      data: [11, 4, 0, 7, 10, 13],
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    },{
      label: '# of Sales',
      data: [10, 0, 10, 0, 10, 22],
      backgroundColor: 
        'rgba(255, 206, 86, 0.2)',
      borderColor: 'rgba(255, 206, 86, 1)',
      borderWidth: 1
    }]
  };

  // tooltip block
  const tooltip = {
    yAlign: 'bottom',
    filter: function filterZeroData(datapoint) {
      return datapoint.raw > 0;
    },
    callbacks: {
      label: function(context) {
        const stackedBarArray = [];
        for (i = 0; i <= context.datasetIndex; i++){
          stackedBarArray.push(context.parsed._stacks.y[i]);
        };
        console.log(stackedBarArray);

        // reduce array
        const reducer = (accumulator, currentValue) => accumulator + currentValue;

        // return value in tooltip
        console.log(context.dataset.label)
        const labelName = context.dataset.label;
        const labelValue = stackedBarArray.reduce(reducer);
        return `${labelName} ${labelValue}`;
      }
    }
  };

  // config 
  const config = {
    type: 'bar',
    data,
    options: {
      plugins: {
        tooltip,
      },
      scales: {
        x: {
          stacked: true
        },
        y: {
          stacked: true,
          beginAtZero: true
        }
      }
    }
  };

  // render init block
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

ChartJS：使用正文中的总和调整工具提示

ChartJS: Adjust Tooltip with sums in body

javascript

chart.js

nested-loops

react-chartjs