在 Chart.js 中，如何从堆叠条形图中隐藏某些轴标签？

Question

我正在开发一个仪表板，它将显示带有票数的图表。 我正在使用Chart.js来呈现图表。 这是一个例子：

在上面的屏幕截图中，Blocker 和 Critical 栏没有出现，因为它们的值为零。 但是，Chart.js仍会在它们应有的位置呈现零。 我认为这可能会使最终用户感到困惑，所以我想隐藏它（同时仍然在图例中显示该类别）。

条形图文档中的以下段落使我认为这可以通过_custom ，但我无法使其正常工作：

{x, y, _custom} 其中 _custom 是可选的 object 定义堆叠条属性：{start, end, barStart, barEnd, min, max}。 start 和 end 是输入值。 这两个在 barStart（更接近原点）、barEnd（更远离原点）、min 和 max 中重复。

有谁知道这是否可能？

作为参考，这是我当前的配置选项：

        options: {
                scales: { // make this a stacked chart
                    xAxes: [{
                        stacked: true
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                },
                legend: {
                    labels: {
                        boxWidth: 20 // how wide boxes on legend are
                    }
                },
                tooltips: { 
                    callbacks: {
                        footer: (tooltip_items, data) => { // add a total count to tooltips
                            let total = 0;
                            tooltip_items.forEach(element => total = total + parseInt(element.value));
                            return 'Total: ' + total;
                        }
                    }
                }
            }

Answer 1

我的同事想通了。 您只需要将其添加到选项数组中：

plugins: {
   datalabels: {
      display: function(context) {
         return context.dataset.data[context.dataIndex] > 0; // only return if greater than zero
      }
   }
}

这是它最终的样子：