Chart.js 複数軸<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.js 複数軸(対象:棒グラフ、折線グラフ)


複数軸の考え方

棒グラフ(生産量)と折線グラフ(構成比)の数値が大きく異なると、同一スケールではわかりにくくなることがあります。それで、右図のように、「Y左軸」「Y右軸」の二つの軸を設定する必要があります。

下のように、datasets で yAxisID により、各系列がどの軸に従うかを設定し、options.scales の id でその軸の定義をします(もし第3の系列がある場合は「Y左軸」「Y右軸」のどちらかを指定します)。

    datasets: [
        {
            label: "生産量",
              :
            yAxisID: "Y左軸"       // option でのY左軸の定義に従う
        },
        {
            type: "line",
            label: "構成比",
              :
            yAxisID: "Y右軸"       // option でのY右軸の定義に従う
        }
    ],
    options:
        :
        scales: {
            yAxes: [             // Y軸
                {
                   id: "Y左軸",         // Y左軸の定義
                   position: "left", 
                       :
                   },
                   :
                },
                {
                    id: "Y右軸",         // Y右軸の定義
                    position: "right",        // 図の右側に配置
                        :
                }
            ]
        }               

軸の定義

上のグラフでは、次のように設定しました.js

   「Y左軸」                           「Y右軸」
    id: "Y左軸",         // Y左軸の定義  "Y右軸" 
    position: "left",     // 位置が左側  "right"
    gridLines: {          // 目盛線
        color: "rgba(255, 0, 0, 0.2)"      "rgba(0, 0, 255, 0.2"
    },
    scaleLabel: {         // 軸ラベル
        display: true,
        labelString: "生産量(個)",       "構成比(%)"
        fontColor: "red",                  "blue"
        fontSize: 14                        14                       
     },     
     ticks: {             // 軸スケール
         fontColor: "red",                 "blue"
         min: 0,                            0
         max:300,                           80
         stepSize: 50                       20
     }