複合チャートの種類

Chart.jsを使用すると、2つ以上の異なるチャートの種類を組み合わせた複合チャートを作成できます。一般的な例としては、棒グラフに線グラフのデータセットを含めるなどが挙げられます。

複合チャートを作成する際には、各データセットにチャートの種類を指定します。

const mixedChart = new Chart(ctx, {
    data: {
        datasets: [{
            type: 'bar',
            label: 'Bar Dataset',
            data: [10, 20, 30, 40]
        }, {
            type: 'line',
            label: 'Line Dataset',
            data: [50, 50, 50, 50],
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: options
});

この時点で、チャートは期待通りにレンダリングされます。チャートのデフォルトオプションはデータセットレベルでのみ考慮され、このケースではチャートレベルではマージされないことに注意することが重要です。

const config = { type: 'scatter', data: data, options: { scales: { y: { beginAtZero: true } } } };

const config = {
  type: 'scatter',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

const data = { labels: [ 'January', 'February', 'March', 'April' ], datasets: [{ type: 'bar', label: 'Bar Dataset', data: [10, 20, 30, 40], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'line', label: 'Line Dataset', data: [50, 50, 50, 50], fill: false, borderColor: 'rgb(54, 162, 235)' }] };

const data = {
  labels: [
    'January',
    'February',
    'March',
    'April'
  ],
  datasets: [{
    type: 'bar',
    label: 'Bar Dataset',
    data: [10, 20, 30, 40],
    borderColor: 'rgb(255, 99, 132)',
    backgroundColor: 'rgba(255, 99, 132, 0.2)'
  }, {
    type: 'line',
    label: 'Line Dataset',
    data: [50, 50, 50, 50],
    fill: false,
    borderColor: 'rgb(54, 162, 235)'
  }]
};

描画順序

デフォルトでは、データセットは最初のものが一番上に描画されるように描画されます。これは、データセットに`order`オプションを指定することで変更できます。`order`のデフォルト値は`0`です。これはスタッキング、凡例、ツールチップにも影響することに注意してください。つまり、データセットを並べ替えるのと同じです。

`order`プロパティは特定の順序ではなく重みのように動作するため、数値が大きいほど、そのデータセットはキャンバスに早く描画され、`order`数値が小さい他のデータセットは、その上に描画されます。

const mixedChart = new Chart(ctx, {
   type: 'bar',
   data: {
       datasets: [{
           label: 'Bar Dataset',
           data: [10, 20, 30, 40],
           // this dataset is drawn below
           order: 2
       }, {
           label: 'Line Dataset',
           data: [10, 10, 10, 10],
           type: 'line',
           // this dataset is drawn on top
           order: 1
       }],
       labels: ['January', 'February', 'March', 'April']
   },
   options: options
});