Блог

Кажется, есть несколько примеров того, как сделать что-то подобное, но все они немного отличаются от моего случая. Я загружаю некоторые исходные данные из 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] , это все равно будет неудачно — ошибок нет, и серия не обновляется.

Спасибо!

Обратите внимание, что ваши данные не содержат 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