highcharts VueJs高库存无法正确绘制图形

dojqjjoe  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(191)

这是我的VueJS代码,我使用这个库https://www.npmjs.com/package/highcharts-vue,所以我不知道如何在绘制图形之前获取数据并将其设置为系列。或者如果这是不可能的,我如何才能正确地重新绘制图形?因为现在我设置了一些默认数据,然后从页面获取数据,并重新绘制图形,但当它完成后,我看到我的图形,滚动条移到左边,范围很小。2那么如何设置选项而不改变滚动条和范围选择器呢?

<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>
lvmkulzt

lvmkulzt1#

您应该使用其他VueJS生命周期挂钩点来运行axios请求,因为您试图在组件已经是mounted()的情况下下载它,所以请尝试使用该挂钩点之前的一个挂钩点,例如created()。以下是Vue常规文档中的生命周期图:

相关问题