スタートページ＞ Javascript＞ Chart.js

Chart.js 複合グラフ（対象：棒グラフ、折れ線グラフ）

複合グラフ

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

複合グラフの構成

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

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

複合グラフ（改良形）

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

            datasets: [
                {
                    label: "生産量",
                      :
                    yAxisID: "Ｙ左軸"       // option でのＹ左軸の定義に従う
                },
                {
                    type: "line",
                    label: "構成比",
                      :
                     yAxisID: "Ｙ右軸"       // option でのＹ右軸の定義に従う
                }
            ],
            options
              :
            scales: {
                yAxes: [
                     :    // Ｙ左軸に関しては省略
                    {
                        id: "Ｙ右軸",         // Ｙ右軸の定義
                        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 にする必要があります（私は理由がわかりません）。
また、後で指定した系列に前系列が上書きされるようです。そのため、塗りつぶしのない系列（ここでは折線）を前に記述するほう（ＡよりもＣのほう）のほうが見やすくなります。

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

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

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

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