Chart.js 複合グラフ<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

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


複合グラフ

ここでの複合グラフとは、棒グラフと折線グラフを重ねたグラフのことです。

複合グラフの構成

棒グラフと折線グラフを複合したグラフを作成します。右図のような単純なものなら、簡単に記述できます。

        type: "bar",           // 一応棒グラフだとしておく
       :
            datasets: [
                {                     // 棒グラフにする系列はそのまま
                    label: "生産量",
                    data: [100, 200, 250, 150, 200],
             :
                },
                {
                    type: "line",      // この系列を折線グラフだと指定
                    label: "構成比",
                    data: [ 20, 50, 10,  30,  40],
                         :
                }
            ]


複合グラフ(改良形)

上図の「基本形」では、棒グラフ(生産量)と折線グラフ(構成比)が同一スケールのため、折線グラフがわかりにくくなっています。それで、右図のように、図の右側に「Y右軸」を設定しました。

            datasets: [
                {
                    label: "生産量",
                      :
                    yAxisID: "Y左軸"       // option でのY左軸の定義に従う
                },
                {
                    type: "line",
                    label: "構成比",
                      :
                     yAxisID: "Y右軸"       // option でのY右軸の定義に従う
                }
            ],
            options
              :
            scales: {
                yAxes: [
                     :    // Y左軸に関しては省略
                    {
                        id: "Y右軸",         // Y右軸の定義
                        position: "right",        // 図の右側に配置
                        gridLines: {              // 補助線の定義
                            color: "rgba(0, 0, 255, 0.2)"
                        },
                        scaleLabel: {             // 右側のラベル
                           display: true, 
                           labelString: "構成比(%)",
                           fontColor: "blue",
                           fontSize: 14
                        },                        
                        ticks: {                  // 右側の目盛り
                            fontColor: "blue",
                            min: 0,
                            max:80,
                            stepSize: 20 
                        }
                    }

全体設定は bar にする

棒グラフ(bar)と折線グラフ(line)の複合グラフの場合、全体のタイプを bar とし、個別系列のタイプを line にする必要があります(私は理由がわかりません)。
また、後で指定した系列に前系列が上書きされるようです。そのため、塗りつぶしのない系列(ここでは折線)を前に記述するほう(AよりもCのほう)のほうが見やすくなります。

複合グラフA

    type: "bar",
              :
        datasets: [
            {
                    : 生産量
            },
            {
                type: "line",
                    : 構成比
            }

複合グラフB

    type: "line",
              :
        datasets: [
            {
                type: "bar",
                    : 生産量
            },
            {
                    : 構成比
            }

複合グラフC

    type: "bar",
              :
        datasets: [
            {
                type: "line",
                    : 構成比
            },
            {
                    : 生産量
            }

複合グラフD

    type: "line",
              :
        datasets: [
            {
                    : 構成比
            },
            {
                type: "bar",
                    : 生産量
            }