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

這是它最終的樣子：