Chart.js v3：工具提示回调无法识别堆叠条形图的点击数据集

如何解决Chart.js v3：工具提示回调无法识别堆叠条形图的点击数据集

在 Chart.js v2 中，ChartTooltipItem[] 的 datasetIndex 属性标识堆叠条形图的哪一段被点击。这允许为堆积条形图的每个部分自定义工具提示内容。

在 v3 中，TooltipItem[] 提供数据集，但不识别点击了哪个数据集。每个 TooltipItem 都有一个 datasetIndex 字段，但它只是匹配 TooltipItem[] 中的索引，而不是识别点击的片段。

有没有人在 V3 工具提示回调中找到一个字段来识别点击了堆积条形图的哪个部分？或者这个功能在 v3 重写中丢失了吗？

解决方法

它工作正常，唯一不同的是它似乎在 v2 中默认为 point 模式，而现在它使用 index 模式，如果您将其改回 { {1}} 它按预期工作：

point

var options = {
  type: 'bar',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: 'red'
      },{
        label: '# of Points',data: [7,11,8,7],backgroundColor: 'blue'
      }
    ]
  },options: {
    plugins: {
      tooltip: {
        mode: 'point',callbacks: {
          beforeBody: (ttItems,x) => {
            ttItems.forEach((ttItem) => {
              console.log('BeforeBody: ',ttItem.datasetIndex,ttItem.dataIndex)
            })
          },afterBody: (ttItems,x) => {
            ttItems.forEach((ttItem) => {
              console.log('AfterBody: ',ttItem.dataIndex)
            })
          }
        }
      }
    },scales: {
      y: {
        stacked: true
      },x: {
        stacked: true
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);