混合圖表類型

藉由 Chart.js，可以建立由兩個或以上的不同圖表混合而成的混合圖表。常見的範例是包含線性資料集的長條圖表。

建立混合圖表時，我們為每個資料集指定圖表類型。

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: [ '一月', '二月', '三月', '四月' ], datasets: [{ type: 'bar', label: '長條圖資料組', data: [10, 20, 30, 40], borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.2)' }, { type: 'line', label: '折線圖資料組', 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 屬性的行為就像權重而不是特定順序，因此數字越大，資料組就會越早繪製在畫布上，而順序數字較小的其他資料組就會在其上繪製。

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
});