如何在Highcharts中使用Vue绑定数据？

我有一个图表，轴的内容和数据将随时间变化。这在Vue框架中发生

我的想法是使用

setData（）

和

setCategories（）

为图表指针提供动态数据。这不起作用：数据更新时，图表不起作用。

该示例如所示，并复制如下，以供参考。请注意，这会挂起我的浏览器（但代码笔版本还可以）

newvue({
el:“应用程序”，
数据：{
配置：{
图表：{
类型：“热图”
},
系列：[{}]
},
src:['a'，'b']，
dst:['x'，'y']，
数据：[[0,0,1]，[0,1,2]，[1,0,3]，[1,1,4]，
图表：未定义
},
安装的（）{
this.chart=Highcharts.chart（'container'，this.config）
console.log（this.chart）
//轴和数据的内容将是动态的
this.chart.series[0].setData（this.data，true）
this.chart.xAxis[0].setCategories（this.src，true）
this.chart.yAxis[0].setCategories（this.dst，true）
//模拟某些数据在一段时间后的变化
设置超时（（）=>{
this.data=[[0,0,10]，[0,1,20]，[1,0,30]，[1,1,40]]
//console.log（'updated'）
}, 3000)
}
})

---

要允许图表自动更新，您需要使用观察程序或在视图中使用vue变量来观察vue变量

我正在使用以下步骤：

因为Highcharts需要在页面上有一个真实的元素才能工作，所以我们不能在视图中直接使用它们，我们需要在可以更改的字段上使用观察者

我们首先将图表渲染代码提取到一个单独的函数中，这允许我们从多个位置调用该方法

然后，我们为图表所需的变量添加观察程序，在这些观察程序中，我们调用呈现函数

最后，我们在mounted方法中呈现图表

从这一点上，我们可以看到，我们使用的库Highcharts也支持在更改时动态更新数据，我们可以利用这一点来防止重新呈现完整元素，并在这里节省一些CPU周期

newvue({
el:“应用程序”，
数据：{
图表：未定义，
配置：{
图表：{
类型：“热图”
},
系列：[{}]
},
src:['a'，'b']，
dst:['x'，'y']，
数据：[[0,0,1]，[0,1,2]，[1,0,3]，[1,1,4]]
},
安装的（）{
这个。render（）；
//模拟某些数据在一段时间后的变化
设置超时（（）=>{
this.data=[[0,0,10]，[0,1,20]，[1,0,30]，[1,1,40]]
console.log（'updated'）
}, 3000)
},
观察：{
数据（）{
this.chart.series[0].setData（this.data，true）
},
config（）{
这个。render（）；
},
src（）{
this.chart.xAxis[0].setCategories（this.src，true）
},
dst（）{
this.chart.yAxis[0].setCategories（this.dst，true）
},
},
方法：{
render（）{
this.chart=Highcharts.chart（'container'，this.config）
//轴和数据的内容将是动态的
this.chart.series[0].setData（this.data，true）
this.chart.xAxis[0].setCategories（this.src，true）
this.chart.yAxis[0].setCategories（this.dst，true）
}
}
})

在本例中，是

console.log

行终止了浏览器，可能是因为堆栈溢出本身的

console.log

handler@Ferrybig：我把它注释掉了，但是浏览器仍然挂起（而且代码笔仍然工作：）。我实际上是指另一个控制台。log（第一个），没有意识到还有第二个…@Ferrybig:ah，正确的。我自己忘了有两个：）谢谢，谢谢。查看

config

有什么特别的原因吗？为什么不在

mounted（）

中初始化

这个.chart

，这样就不会在每次数据更改时重新创建它？我没有想到，当配置更改时，只更新了rieinitize的答案（如果这是您或其他看到此问答的人的要求），在其他情况下，只需更新数据即可