隱藏 x 軸上的刻度會剪輯圖表 (Chart.JS)

Question

我試圖隱藏氣泡圖 x 軸上的刻度。

我嘗試在 ticks 屬性中使用“display: false”。

它確實刪除了刻度，但圖表現在正在被剪裁。

有沒有辦法可以隱藏這些刻度而不影響圖表的外觀，或者添加一些填充以使圖表的外觀不受影響？

去除蜱蟲前的外觀

使用“display：false”刪除刻度后進行剪輯

您可以在下面看到我創建的圖表的代碼：

xAxes : [
    {
        id : 'first-x-axis',
        ticks : {
            display : false,
            min :  <  ? php echo $min ?  > , // Controls where axis starts
            max :  <  ? php echo $max ?  > , // Controls where axis finishes
            stepSize :  <  ? php echo $step ?  > // Control the gap between the first x-axis value and the last x-axis value
        },
        gridLines : {
            display : false,
            lineWidth : 7 // Width of bottom line
        }
    }
]

我感謝任何幫助或建議^_^

Answer 1

我想到了！

您可以使用“gridlines”中的“tickMarkLength”來調整刻度線的高度/長度

您可以在下面看到解決方案的代碼：

xAxes: [
    {
        id: 'first-x-axis',
        ticks: {
            display: false,
            min: <?php echo $min ?>, // Controls where axis starts
            max: <?php echo $max ?>, // Controls where axis finishes
            stepSize: <?php echo $step ?> // Control the gap between the first x-axis value and the last x-axis value
        },
        gridLines: {
            display: false,
            lineWidth: 7,
            tickMarkLength: 30// Adjusts the height for the tick marks area
        }
    }
]

我希望這有幫助！