chart.js 3 个堆叠条形图 - 显示零值的工具提示

Question

我有一个堆叠条形图，当我将鼠标悬停在条形底部附近时，工具提示显示零值，如下所示：

...我只希望工具提示显示在非零柱上，如下所示：

图表的 JSON 如下所示：

...即“6-10 小时”是一个数据集，数据中没有值的地方为 0（因此它与正确的条对齐）

除工具提示外，图表功能正常。有没有办法从工具提示中删除 0 值？

Answer 1

您可以定义一个 tooltip.filter callback 函数，returns false 用于零值，否则 true。

请查看下面的可运行代码片段，看看它是如何工作的。

new Chart('myChart', {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Dataset',
      data: [0, 2, 0, 3],
    }]
  },
  options: {
    responsive: false,
    plugins: {
      tooltip: {   
        mode: 'dataset',
        filter: tooltipItem => tooltipItem.dataset.data[tooltipItem.dataIndex] > 0
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<canvas id="myChart"></canvas>

chart.js 3 个堆叠条形图 - 显示零值的工具提示

chart.js 3 stacked bar chart - tooltip showing for zero values

chart.js

chart.jsv3