vue中使用hightcharts动态加载数据没法更新的问题解决

最近一个vue搭建的项目中，要有图表的展示。类似的图表类插件很多，但是比较习惯用hightcharts.

首先npm install highcharts --save安装hightcharts.

安装完成后package.json中会有相应版本号，如图1-1

1-1

然后在需要用的到的.vue文件中引入import HighCharts from 'highcharts'

接下来正常配置图表参数，给元素绑定id,初始化图表，刚开始用HighCharts.chart(this.id,this.option);初始化图表，

在请求函数的回调里，按原有的使用jq时使用hightcharts的思想，想用请求来的动态数据替换写死的图表假数据值，如图：1-2

1-2

结果出现了问题，怎么也替换不了写死的数据，请求来的数据可以打印出来，但是图表没有更新数据，x轴，y轴的值没有变化

解决方法：

使用  let charts =new HighCharts.chart(this.id,this.option);来初始化图表，把图表对象用charts储存。

替换数据时用hightcharts的 .addSeries与 .setCategories方法来替换参数中的值，如图1-3

1-3

原因：因为第一种方法找不到图表对象，所以无法进行数据的动态更新。

如引用的插件不是hightcharts而是vue-hightcharts,可参考下边链接，解决方法同理。

vue-hightcharts链接   http://www.php.cn/js-tutorial-390415.html