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

Question

在 Chart.js v2 中，ChartTooltipItem[] 的数据集索引属性标识了堆叠条形图的哪个部分被单击。这允许为堆叠条形图的每个部分自定义工具提示内容。

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

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

Answer 1

它工作正常，唯一不同的是它似乎在 v2 中默认为 point 模式，而现在它使用 index 模式，如果您将其更改回来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, 5, 8, 3, 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.datasetIndex, ttItem.dataIndex)
            })
          }
        }
      }
    },
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    }
  }
}

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

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

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

Chart.js v3: Tooltip callback doesn't identify clicked dataset of stacked bar chart

javascript

stacked-chart

chart.js