複合グラフ(Mixed)

Chart.jsでは、2つ種類以上のチャートを組み合わせて複合グラフを生成することができます。 一般的な例は、折れ線グラフを含めた棒グラフです。

複合グラフの作成は、基本チャートの初期化から始めます。

var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

この時点で、標準的な棒グラフが生成されます。 次に、データセットの1つを折れ線グラフのデータセットに変換しなければなりません。

var mixedChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
          label: 'Bar Dataset',
          data: [10, 20, 30, 40]
        }, {
          label: 'Line Dataset',
          data: [50, 50, 50, 50],

          // このデータセットを折れ線グラフにします。
          type: 'line'
        }],
    labels: ['January', 'February', 'March', 'April']
  },
  options: options
});

これで、どのように表示させるかを指定することができました。 ここで重要なのは、折れ線グラフのデフォルトオプションはマージされないことです。 デフォルトオプションは既定の種類のチャートのオプションのみがマージされます。 今回の例では、typeフィールドには棒グラフが設定されたので、棒グラフのデフォルトオプションがマージされます。

デモ

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["January", "February", "March", "April"],
    datasets: [{
        label: "Bar Dataset",
        data: [10,20,30,40],
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.2)"
      },{
        label: "Line Dataset",
        data: [50,45,40,35],
        type: "line",
        fill: false,
        borderColor: "rgb(54, 162, 235)"
    }]
  },
  options: {
    scales:{
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

HTML

<canvas id="myChart"></canvas>

描画順序

デフォルトでは最初のデータセットが最上位になるように描画されます。 この順序はデータセットのorderオプションを指定することで変更することができます。 orderの初期値は0です。

JavaScript

var mixedChart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 20, 30, 40],
            // このデータセットは下に表示されます
            order: 1
        }, {
            label: 'Line Dataset',
            data: [10, 10, 10, 10],
            type: 'line',
            // このデータセットが上に表示されます
            order: 2
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

デモ

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            label: 'Bar Dataset',
            data: [10, 20, 30, 40],
            // このデータセットは下に表示されます
            order: 1
        }, {
            label: 'Line Dataset',
            data: [10, 10, 10, 10],
            type: 'line',
            // このデータセットが上に表示されます
            order: 2
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
      scales:{
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
});

HTML

<canvas id="myChart"></canvas>