Highcharts在VueJS / Vuex中添加新数据点

Question

我想使用highcharts显示一组初始数据，然后每两秒添加一个新的数据点。 我订阅了一个外部WebSocket服务，它最初向我提供数据，然后每两秒向我发送一个新值。

我正在使用Highcharts中的events选项来尝试从vuex商店中获取数据。这是我的代码。

chart:{
                  type: 'spline',
                  animation: '',
                  events: {
                    load: function () {

                      // set up the updating of the chart each second
                      var series = this.series[0];
                      setInterval(function () {

                        series.addPoint([this.$store.getters.getTickEpoch, this.$store.getters.getTickQuote], true, true);
                      }.bind(this), 1000);
                    }.bind(this)
                  }
                }

问题是，如果我没有将.bind（this）添加到我的函数中，我看不到vuex存储，但是当我添加.bind（this）时，var series = this.series [0 ]。不再有用了。

如何使用vuex数据实时更新我的​​图表？

Answer 1

答案是使用vue-highcharts插件。这解决了我所有的问题，并允许我按照简单的例子快速设置实时图表。