[Vue]highcharts：如何在数据更新后自动更新图表中的数据

本文链接：https://blog.csdn.net/ruienger/article/details/109384048

本文介绍了在Vue应用中使用Highcharts时，如何实现数据更新后图表自动更新的方法。通过设置Vue的watch观察者，监听数据变化，然后调用Highcharts的reDraw方法来重绘图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

highCharts需要一组数组来为图表的内容赋值，但是在大多数情况下，数据是需要实时更新与请求的。这时原来的图表就需要更新。
在Vue中，数据更新会相应的触发重渲染，但是highChats并不会根据数据更新自动更新。
我们让它自动更新的思路是：
*watch观察者 —触发–> 更新数据 --然后–> 重绘

步骤*

先导入highChart

import Highcharts, { chart, Chart } from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

然后在导出的对象或者Vue实例中的data、props或者computed中添加

//我把它写成了组件，options也可以放在data中
props:{
      options:{}
},
data(){
  return {
    chart: {
  }
}

在组件、实例创建时的mounted钩子函数中初始化一个chart实例

initChart() {
     this.chart = new Highcharts.Chart('container', this.options);
}
//这个函数用来初始化chart实例。
//options指的是这个chart实例的配置选项
//方法中的chart、options来自于data、props或computed中

//然后愉快的使用它吧！
mounted(){
	this.initChart()
}

options可以在官网自行查看并配置，我这里的数据由于需要请求网络，不能按默认的给，于是
添加 watch 监视options

//options后面的这个函数一定不要用箭头函数，否则this指向不正确
watch:{
      options:function(){
        console.log('ChartsDataUpdate')
        this.reDraw()
      }
    }

这样数据更新的时候会触发watcher从而调用 reDraw
methods中的reDraw

reDraw(){
//遍历图表series中的所有元素然后调用api中提供的 setData 方法
          let length = this.chart.series.length
          for(let i=0; i<length; i++){
            this.chart.series[i].setData(this.options.series[i].data)
          }
          //替换完毕后重绘，调用api中的redraw
          this.chart.redraw()
        }