用高级图表绘制变量数列-vue和axios

Question

我正在尝试加载一个未知数量的系列，使用axios从http请求中填充我的图表。有人知道怎么做吗？我只能通过设置5系列的series = [{}, {}, {}, {}, {}]来加载一个设定的系列数。

./App.vue

<template>
  <div id="app">
    <bar-chart>
    </bar-chart>
  </div>
</template>

<script>

  import BarChart from './components/BarChart'

  export default {
    name: 'app',
    components: {BarChart},
  }

</script>

./components/BarChart.vue

<template>
  <highcharts class="chart" :options="chartOptions">
  </highcharts>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "BarChart",
    data() {
      return {
        chartOptions: {
          chart: {
            type: 'column'
          },
          series: [{}]
        }
      }
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData: function () {
        var vm = this;
        var dataUrl = 'http://127.0.0.1:8001/test-url/kpis/my-test-url/';
        axios.get(dataUrl)
          .then(function (response) {
            var data = response.data;
            vm.chartOptions = data;
          })
      }
    }
  }
</script>

Answer 1

这看起来像一个bug，因为vue组件用禁用的oneToOne选项更新图表--参见chart.update()。我已经在github上报告过了。

您可以始终使用图表的命令式方法添加系列：

  axios.get(dataUrl)
    .then(res => {
      res.data.forEach(series => {
        this.$children[0].chart.addSeries(series)
      })
    })

请记住，如果您这样做，图表选项将不再与图表同步-因此它可能会导致一些意想不到的问题。