Chart.js 調整x軸間隔並且要顯示第1筆和最後1筆

chart.js x軸

cba246246 2023-02-03 16:22:12 ‧ 955 瀏覽

分享至

小弟有一個圖表如下圖

因為x軸時間太多，所以在options的xAxes裡設定了

ticks: { maxTicksLimit: 5 }

結果如下

但是最後1筆的2023/1/30消失了

想請問有沒有辦法讓最後1筆的2023/1/30 也顯示出來

ddx iT邦研究生 5 級 ‧ 2023-02-04 09:26:59 檢舉

你在X軸的那個ticks 加上min和max看看

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

JamesDoge

iT邦高手 1 級 ‧ 2023-02-05 07:51:52

試試看 ticks.callback 函數

options: 
{
    scales: 
    {
        xAxes: [{
            ticks: 
            {
                // 設定最多顯示多少個x軸標籤
                maxTicksLimit: 5,
                // 回調函數，用於決定每個x軸標籤要顯示什麼
                callback: function(value, index, values) 
                {
                    // 只顯示第1筆和最後1筆
                    if (index === 0 || index === values.length - 1) 
                    {
                        return value;
                    }
                }
            }
        }]
    }
}

範例程式僅供參考