首先贴出部分代码:
function createChart(List1,List2,List3,List4,dateData){
var chart = new Highcharts.Chart('container', {
title: {
text: '多条折线',
x: -20
},
credits: { //是否显示版权信息
enabled: false
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories:dateData
},
yAxis: {
title: {
text: ''
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared: true,
crosshairs: true,
crosshairs: [{
width: 1,
color: "#006cee",
dashStyle: 'longdashdot',
zIndex: 100
}],
// 时间格式化字符
// 默认会根据当前的数据点间隔取对应的值
// 当前图表中数据点间隔为 1天,所以配置 day 值即可
dateTimeLabelFormats: {
day: '%Y-%m-%d'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: '折线1',
data: List1
},{
name: '折线2',
data: List2
},{
name: '折线3',
data: List3
},{
name: '折线4',
data: List4
}]
});
}
其中List1,List2,List3,List4,dateData全部都是从后台传过来的集合,里面存储着对应的数据。其中dateData中存储的是日期,讲这些数据传进来后会被自动加载到图上。
效果图如下:
这是四条折线,不过两两重合了。