1.首先,看看这一小段 highchart配置:
var chart = Highcharts.chart('container', {
title: {
text: '图表变换'
},
subtitle: {
text: '普通的'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
series: [{
type: 'spline',
colorByPoint: true,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
showInLegend: false
}]
});
生成:
对,就是散点的,为什么散点呢?
2.再看到series的data:
3.这里的series数组是一维的,所以每一项数据都是独立的,相对的说,如果数据是同一组的话是这样的:
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
可以看到,这里的series有多个object{ name:'' , data: [] } ,而series[0].data[0] 和 series[1].data[0] 是一组数据,以此类推,如果chart的type是spline(折线图类型),那么会自动连接chen成线而不是变成scatter(散点图)了。
4.值得注意的是,在实时刷新的折线图生成中,如果不只是一条线的时候,要注意这个属性:
chart.addPoint([x, y], false, true);
看看官网的addPoint用法:
可以知道,当shift属性为true时,且如果一开始series长度只有1,也就是一个data,那么每次实时更新的时候,就会导致只有一个点的更新了 ,虽然这时候shift可以设置为false,但是这样的话,实时更新的时候每个点都会加进图表导致它越来越臃肿。
解决办法:初始化series的时候先push一个为0的data。
这样的话,实时刷新的图就会一直存在两个点,且会自动连接成线而不是变成散点图了。