如何使用chartkick（chart.js）僅顯示x軸（y = 0）？

Question

我只想在我的條形圖上顯示 y = 0 處的 x 軸，即下面顯示的綠線。

我應該使用什么 chart.js/chartkick 配置來實現這一點？ 還是我要直接 plot 呢？ 如果是這樣，我該如何實現？

目前，我有以下 chart.js 配置，它刪除了包括所需 x 軸在內的所有線。

library: {
    scales: {
        yAxes: [{
            ticks: {
                display: false,
            },
            gridLines: {
                display: false,
            }
        }],
        xAxes: [{
            ticks: {
                display: false,
            },
            gridLines: {
                display: false
            }
        }],
    },
}
                                
                            

Answer 1

假設您使用的是 Chart.js 版本 2.9.4，這可以通過定義yAxis.gridLines來完成，如下所示：

gridLines: {
  lineWidth: 0,
  zeroLineWidth: 3,
  zeroLineColor: 'rgb(101, 157, 52)',
  z: 10
}

有關各個網格線選項的更多詳細信息，請參閱 Chart.js v2.9 文檔。

請看下面的可運行代碼，看看它是如何工作的。

 new Chart('chart', { type: 'bar', data: { labels: ['A', 'B', 'C'], datasets: [{ label: 'My Dataset', data: [50, -15, 30], backgroundColor: 'rgba(0, 0, 255, 0.2)', borderColor: 'rgb(0, 0, 255)', borderWidth: 2 }] }, options: { legend: { display: false }, scales: { yAxes: [{ ticks: { display: false }, gridLines: { lineWidth: 0, zeroLineWidth: 3, zeroLineColor: 'rgb(101, 157, 52)', z: 10 } }], xAxes: [{ ticks: { display: false }, gridLines: { display: false } }] } } });

 canvas { max-width: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="chart" height="120"></canvas>