ApexChart是一个用于数据可视化的JavaScript库。它支持许多类型的图表,包括折线图。本文提供一种用ApexChart绘制折线图的另一种选项。
代码示例:
HTML代码:
JavaScript代码:
var options = {
series: [{
name: 'Series A',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
annotations: {
xaxis: [{
x: new Date('23 Nov 2017').getTime(),
borderColor: '#00E396',
label: {
borderColor: '#00E396',
style: {
fontSize: '12px',
color: '#fff',
background: '#00E396'
},
text: 'Vertical'
}
}]
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Line Chart',
align: 'left'
},
grid: {
borderColor: '#f1f1f1',
},
xaxis: {
type: 'datetime',
categories: ["1/11/2000", "2/11/2000", "3/11/2000", "4/11/2000", "5/11/2000", "6/11/2000", "7/11/2000", "8/11/2000", "9/11/2000"],
},
yaxis: {
title: {
text: 'Price'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
该例子中,我们使用了ApexChart库来绘制一条折线图。我们使用“datetime”类型的x轴,这意味着我们可以根据日期