Chart.js垂直堆叠柱状图如何消除零值/无数据项的hover提示

我完全懂这种烦恼！明明对应位置没有数据（比如null）或者值为0，鼠标hover的时候却还是会弹出这些项的提示，确实破坏了图表的交互体验。针对你使用的Chart.js 2.6.0版本，可以通过配置tooltip的过滤回调来完美解决这个问题，具体实现如下：

你只需要在图表的options中添加tooltips配置，通过filter函数过滤掉无效值（0、null、undefined）：

var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['1', '2'],
      datasets: [{
         label: 'a',
         data: [1, 8],
         backgroundColor: '#22aa99'
      }, {
         label: 'b',
         data: [1, 2],
         backgroundColor: '#109618'
      }, {
         label: 'c',
         data: [0, 1],
         backgroundColor: '#dc3912'
      }, {
         label: 'd',
         data: [4, null],
         backgroundColor: '#3366cc'
      },
      {
         label: 'e',
         data: [4, null],
         backgroundColor: '#9661ca'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right'
      },
      // 新增的tooltip过滤配置
      tooltips: {
         filter: function(tooltipItem, data) {
            // 获取当前tooltip项对应的数据值
            var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            // 只保留非null、非0、非undefined的有效数据项
            return value !== null && value !== 0 && typeof value !== 'undefined';
         }
      },
      scales: {
         xAxes: [{
            stacked: true
         }],
         yAxes: [{
            stacked: true
         }]
      }
   }
});

原理说明 #

这个filter函数会在生成hover提示前，逐一检查每个待显示的数据集项：

• 如果对应位置的数据是null、0或者undefined，就会被过滤掉，不会出现在提示框中
• 只有有效的非零、非空数据项才会正常显示hover提示

这样处理后，你再hover右侧的柱子时，就不会看到d和e的提示了；hover左侧柱子时，c项（值为0）也不会出现在提示里，完全符合你的需求~

备注：内容来源于stack exchange，提问作者FluidMechanics Potential Flows