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

Question

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

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

条形图文档中的以下段落让我认为这是可能的_custom，但我无法让它工作：

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

有谁知道这是否可能？

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

        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;
                        }
                    }
                }
            }

标签： javascriptchartschart.js

Answer 1

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

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

这是它最终的样子：