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

Question

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

...我只希望工具提示显示在这样的非零条上：

图表的 JSON 如下所示：

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

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

Answer 1

否则，您可以定义一个返回零值的tooltip.filter 回调函数。falsetrue

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

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>