Chart.js 怎麼設定兩個Y軸

Klook.com
文章觀看次數: 736

發生了什麼事

又是在寫圖表功能的時候遇上了問題

想寫一個具有左右Y軸的圖表，也就是不共用Y軸，但按照比例顯示的

可是上網查了查好像答案都是舊的，故更新了這一篇

先假設大家都碰過Chart.js，那來看個簡單的範例 – 僅擷取一小段

    var data1 = [10, 20, 30, 40, 50, 60, 70];
    var data2 = [10, 2, 3, 8, 5, 6, 7];

    myChart = new Chart(ctx,
    {
        type: 'line',
        data:
        {
            labels: [1,2,3,4,5,6,7],
            datasets: [
            {
                //label: '資料集1',
                data: data1,
                borderColor: 'blue',
                fill: false,
            },
            {
                //label: '資料集2',
                data: data2,
                borderColor: 'red',
                borderDash: [5, 5], // 虛線
                fill: false,
            }]
        },

⬇結果會長底下這樣

要是兩個資料集差距不大的話還好，要是差異很大

或是根本不是同個單位的話，但又想要一起顯示

那就需要來用兩個Y軸來解決這個問題了!

實際上，做法也很簡單

需要從最後的 options 下手

var data1 = [10, 20, 30, 40, 50, 60, 70];
    var data2 = [10, 2, 3, 8, 5, 6, 7];

    myChart = new Chart(ctx,
    {
        type: 'line',
        data:
        {
            labels: [1,2,3,4,5,6,7],
            datasets: [
            {
                //label: '資料集1',
                data: data1,
                borderColor: 'blue',
                fill: false,
				yAxisID: 'y1'
            },
            {
                //label: '資料集2',
                data: data2,
                borderColor: 'red',
                borderDash: [5, 5], // 虛線
                fill: false,
				yAxisID: 'y2'
            }]
        },
        options:
        {
            //雙Y軸設定
            scales:
            {
                y1:
                {
                    type: 'linear',
                    display: true,
                    position: 'left',
                },
                y2:
                {
                    type: 'linear',
                    display: true,
                    position: 'right',

                    grid:
                    {
                        drawOnChartArea: false //不顯示grid
                    }
                },
            }
        }
    });

可以看到我們在 options 裡面自定義了兩個 scales 座標

分別設定了 type : linear 直線、 display 顯示 以及 position 位置 – 一個左邊一個右邊

然後在資料集的地方，要針對想要的座標設定去做對應 yAxisID

這樣看起來會長的像底下這樣

可以看的出來藍色的資料對應左邊的座標 – [10, 20, 30, 40, 50, 60, 70]

而紅色虛線對應到右邊 – [10, 2, 3, 8, 5, 6, 7]

結論

其實寫個自定義的圖表超乎想像之外的麻煩呢…

又想要用動態的，遇上了好多好多問題啊

搞不好之後等多玩了點，可以出一系列的 Chart.js 教學文章也說不定?

🧡幫我點一個小小的廣告或留言，都是對我的支持

✅如有任何，歡迎透過留言或messenger讓我知道 !

一些路上撿到的筆記

標籤

相關文章

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *