Highcharts-Vue 等待数据然后更新系列

Question

似乎有一些如何做类似事情的例子，但都与我的情况略有不同。我正在从 API（在 JS 文件中）加载一些股票数据，然后在我的 VUE 中使用它。我想用从 API 数据编译的新数组来更新我的图表系列，但它不起作用，我没有收到任何错误。

我的 Vue 看起来像这样：

<template>
    <div>
        <highcharts :options="chartOptions" :updateArgs="[true, false]" ref="highcharts"></highcharts>
    </div>
</template>

<script>
    import appService from '../stock_prices'
    import {Chart} from 'highcharts-vue'

    export default {
      name: 'stocks',
      props: {
        msg: String
      },
      data () {
        return {
          chartOptions: {
              mySeries: [],
              info: {},
              updateArgs: [true, true, true],
              series: [{
                  data: [1,2,3,4,5,6,7]
                }],
             }
          }, 
        }
      }, //data

      components: {
        highcharts: Chart 
      },

      methods: {
        updateSeries() {

          for (var i = 0; i < this.info.stock_prices.length; i++) {
          this.mySeries.push([this.info.stock_prices[i].volume]);
          i++
          } 


          data: this.mySeries

        }
      }, //methods

      async created () {
        this.info = await appService.getPosts();
        this.updateSeries()
      }, //async created

} //export default

我显然想等待我的 API（在 appService 组件中）中的所有数据加载，然后使用它来创建更新的系列，但我不确定这实际上是怎么回事。

也许需要注意：如果我将方法中的 data: this.mySeries 替换为 data: [10,10,10,10,10,10] 之类的东西，它仍然不成功 - 没有错误，并且该系列没有更新。

谢谢！

Answer 1

请注意，您的数据不包含 chartOptions。此外，在updateSeries() 中，您正在更新不涉及任何内容的数据。它应该类似于下面的示例：

<template>
    <div>
        <highcharts :options="chartOptions" :updateArgs="[true, false]" ref="highcharts"></highcharts>
    </div>
</template>

<script>
    import appService from '../stock_prices'
    import {Chart} from 'highcharts-vue'

    export default {
      name: 'stocks',
      props: {
        msg: String
      },
      data () {
        return {
          mySeries: [],
          info: {},
          updateArgs: [true, true, true],
          chartOptions: {
            series: [{
                data: [1,2,3,4,5,6,7]
            }]
          }
        }
      }, //data

      components: {
        highcharts: Chart 
      },

      methods: {
        updateSeries() {
          for (var i = 0; i < this.info.stock_prices.length; i++) {
            this.mySeries.push([this.info.stock_prices[i].volume]);
          } 

          this.chartOptions.series[0].data: this.mySeries;
        }
      }, //methods

      async created () {
        this.info = await appService.getPosts();
        this.updateSeries()
      }, //async created

} //export default

检查这个例子：

• https://codesandbox.io/s/nw750l07nj