Chart.js 混合图
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 ) ;
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 ) ;
尝试一下 »
以上实例输出结果为：
