使用ApexChart库可以轻松创建美观的折线图。除了常见的折线图,还有其他形式的折线图可供选择。下面是如何使用ApexChart中的“area”选项来创建区域线图的示例代码:
HTML:
JavaScript:
var options = {
chart: {
type: 'area',
},
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
categories: [2000, 2001, 2002, 2003, 2004, 2005, 2006]
},
yaxis: {
title: {
text: 'Series1'
},
title: {
text: 'Series2'
},
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在options对象中,将“type”属性设置为“area”,将创建一个区域线图而不是标准折线图。注意,在数据系列对象中,可以添加“fill”属性来控制填充颜色,从而使不同的数据系列之间更加可区分。