Chart.js 可以建立由兩種或多種不同圖表類型組合而成的混合圖表，比如條形圖與折線圖的混合。
建立混合圖表時，我們在每個資料集上指定圖表類型。
混合圖 type 屬性為 scatter。
柱形圖 type 屬性為 bar ，折線圖 type 屬性為 line ，
type 描述了圖表類型。
const mixedChart = new Chart(ctx, {
data: {
datasets: [{
type: 'bar',
label: '柱形圖資料集',
data: [45, 49,52, 48]
}, {
type: 'line',
label: '折線圖資料集',
data: [50, 40, 45, 49],
}],
labels: ['一月份', '二月份', '三月份', '四月份']
},
options: options
});
接下來我們建立一個簡單的混合圖：
執行個體
const ctx = document.getElementById('myChart');
const data = {
labels: [
'一月份',
'二月份',
'三月份',
'四月份'
],
datasets: [{
type: 'bar',
label: '柱形圖資料集',
data: [45, 49,52, 48],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.2)'
}, {
type: 'line',
label: '折線圖資料集',
data: [50, 40, 45, 49],
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
};
const config = {
type: 'scatter',
data: data,
options: {
responsive: true, // 設定圖表為響應式，根據螢幕視窗變化而變化
maintainAspectRatio: false,// 保持圖表原有比例
scales: {
y: {
beginAtZero: true
}
}
}
};
const myChart = new Chart(ctx, config);
以上執行個體輸出結果為：