1. 程式人生 > >Highchart的折線圖總是顯示一個點的原因

Highchart的折線圖總是顯示一個點的原因

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。

這樣的話,實時重新整理的圖就會一直存在兩個點,且會自動連線成線而不是變成散點圖了。