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

【问题标题】：chart.js 3 stacked bar chart - tooltip showing for zero valueschart.js 3 堆积条形图 - 显示零值的工具提示
【发布时间】：2021-12-18 06:11:03
【问题描述】：

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

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

图表的 JSON 如下所示：

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

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

【问题讨论】：

标签： chart.js chart.jsv3

【解决方案1】：

您可以定义一个 tooltip.filter callback 函数，该函数对于零值返回 false，否则返回 true。

请看下面的可运行代码sn-p，看看它是如何工作的。

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>

【讨论】：

感谢uminder，感谢完美:)