Chart.js - にほんご。

複合グラフ(Mixed)

更新日: 2018-09-04

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>

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。