Highchart的折线图总是显示一个点的原因

淩亂°似流年 2022-05-16 14:21 147阅读 0赞

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
    	}]
    });

生成：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70][]

对，就是散点的，为什么散点呢？

2.再看到series的data：

![20181031093755951.png][]

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用法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 1][]

可以知道，当shift属性为true时，且如果一开始series长度只有1，也就是一个data，那么每次实时更新的时候，就会导致只有一个点的更新了 ，虽然这时候shift可以设置为false，但是这样的话，实时更新的时候每个点都会加进图表导致它越来越臃肿。

解决办法：初始化series的时候先push一个为0的data。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 2][]

这样的话，实时刷新的图就会一直存在两个点，且会自动连接成线而不是变成散点图了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70]: /images/20220503/b658a91c0b1d417ab156464e89cdf0ee.png
[20181031093755951.png]: /images/20220503/00d0b707b89e4e2dab47084c45b44742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 1]: /images/20220503/305c1aca3a114a59b8a0e582da665c8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 2]: /images/20220503/c1c5155b1aa541bf9d3a20ae1ff13e73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBU3RyaXZlcg_size_16_color_FFFFFF_t_70 3]: /images/20220503/f53956e49a51458cbd5459b7d298496a.png