javascript - VueJs highstock 无法正确绘制图形

Question

这是我的 VueJS 代码，我使用这个库https://www.npmjs.com/package/highcharts-vue 所以我不知道如何在绘制图表之前获取数据并将其设置为系列。或者，如果这不可行，我该如何正确重绘图形？因为现在我设置了一些默认数据，然后从页面获取数据，然后重绘图表，但是当它完成并且我看到我的图表时，滚动条会转到左侧并且范围非常小。那么如何在不改变滚动条和范围选择器的情况下设置选项呢？

<template>
  <highcharts :constructor-type="'stockChart'" :options="options" :updateArgs="[true, false]" ref="linerchart"></highcharts>
</template>

<script>
    import {Chart} from 'highcharts-vue'
    import Highcharts from 'highcharts'
    import stockInit from 'highcharts/modules/stock'
    stockInit(Highcharts)
    export default {
      data: () => ({
        obj: [],
        names: ['CAFF'],
        options: {
          credits: { enabled: false },
          rangeSelector: {
            selected: 1,
            inputEnabled: false,
            buttonTheme: {
                visibility: 'visible'
            }
          },
          yAxis: {
            labels: {
                formatter: function () {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
          },
          plotOptions: {
            series: {
              compare: 'percent',
              showCheckbox: false,
              events: {
                checkboxClick: function (event) {
                  if (event.checked) {
                      this.show();
                  } else {
                      this.hide();
                  }
                }
              }
            }
          },
          tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
            split: true
          },
          series: [{
            name: "CAFF",
            data: [1,2,3,4,5,6]
          }]
        }
      }),
      methods: {
        linerGraph() {
          var that = this;
          this.names.forEach(function(name, i){
            axios.get('/test/account/CAFF')
            .then(response => {
              console.log(response.data)
              that.obj.push({name: name, data: response.data});
            });
          });
          this.options.series = that.obj
        },
      },
      components: {
        highcharts: Chart
      },
      mounted() {
        console.log(this.$refs.linerchart)
        this.linerGraph();
      }
    }
</script>

标签： javascriptlaravelvue.jshighchartshighstock

Answer 1

您应该使用其他 VueJS 生命周期挂钩点来运行axios请求，因为您正在尝试在组件已经mounted()是created(). 这是来自Vue General Documentation的生命周期图：