使用highCharts动态更新图表数据的一个大坑

最近用了highCharts插件来绘制图表，需求是按一个按钮，可以更新图表中的数据。
发现官网教程直接有这一个功能的介绍
链接：官网教程
官网给出的实例代码：

var chart = Highcharts.chart('container', {
	title: {
		text: '图表变换'
	},
	subtitle: {
		text: '普通的'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	series: [{
		type: 'column',
		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
	}]
});
// 给 wrapper 添加点击事件
Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
	var target = e.target,
		button = null;
	if(target.tagName === 'BUTTON') { // 判断点的是否是 button
		button = target.id;
		switch(button) {
			case 'plain': 
				chart.update({
					chart: {
						inverted: false,
						polar: false
					},
					subtitle: {
						text: '普通的'
					}
				});
				break;
			case 'inverted': 
				chart.update({
					chart: {
						inverted: true,
						polar: false
					},
					subtitle: {
						text: '反转'
					}
				});
				break;
			case 'polar': 
				chart.update({
					chart: {
						inverted: false,
						polar: true
					},
					subtitle: {
						text: '极地图'
					}
				});
				break;
		}
	}
});

最终效果如下

点击按钮可以改变显示方式，比如点击反转就会从十二月到一月反着排列。
那如果想实现，点击按钮，改变数据，则可以：先定义两个data2和data1（你希望更改为的数据，在此处我是在官网的例子中直接加的），然后在update中加上series这一个属性，就可以实现数据改变成为期望的data2或data1

var chart = Highcharts.chart('container', {
	title: {
		text: '图表变换'
	},
	subtitle: {
		text: '普通的'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	series: [{
		type: 'column',
		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
	}]
});
var data2 = [200,200, 200, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,200,200];
var data1 = [0, 0, 0, 0, 0, 10, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
// 给 wrapper 添加点击事件
Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
	var target = e.target,
		button = null;
	if(target.tagName === 'BUTTON') { // 判断点的是否是 button
		button = target.id;
		switch(button) {
			case 'plain': 
				chart.update({
					chart: {
						inverted: false,
						polar: false
					},
					subtitle: {
						text: '普通的'
					}
				});
				break;
			case 'inverted': 
				chart.update({
					chart: {
						inverted: true,
						polar: false
					},
					subtitle: {
						text: '反转'
					},
					series: [{
						type: 'column',
						colorByPoint: true,
						data: data1,
						showInLegend: false
					}]
				});
				break;
			case 'polar': 
				chart.update({
					chart: {
						inverted: false,
						polar: true
					},
					subtitle: {
						text: '极地图'
					},
					series: [{
						type: 'column',
						colorByPoint: true,
						data: data2,
						showInLegend: false
					}]
				});
				break;
		}
	}
});

然而，坑爹的事情发生了

当你多多轮着点击（多轮着点几次）这三个按钮你就会发现，显示的数据与你预期的data1，data2可能不符，这是因为，data1和data2会被highchart自动更改
为什么会被更改
因为引用，data1，data2传递的是一个引用，所以会被更改

如何解决

其实官网给出了一个专门的函数，用来更新数据，我是看了这个解释才发现的解决方法
就是这个setData函数，点击此处跳转到这个函数的介绍

看看它的第四个参数，就明白了。默认是true，也就是传递的是引用，这样的话效果和我在update里面改数据是一样的，也就是说在更新前后数据长度一致时，会更改你的data1或data2.
把它设为false，问题解决了