Нарисуйте переменное число серий с highcharts-vue и axios

Question

Я пытаюсь загрузить неизвестное число серий, чтобы заполнить мою диаграмму из запроса http, используя axios .Кто-нибудь знает как это сделать?Я могу загрузить только определенное количество серий, установив, например, series = [{}, {}, {}, {}, {}] для 5 серий.

. / 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>

. /компоненты / 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

Это похоже на ошибку, потому что компонент vue обновляет диаграмму с отключенной опцией oneToOne - см. chart.update () .Я сообщил об этом на github .

Вы всегда можете использовать императивные методы диаграммы для добавления серии:

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

Имейте в виду, что если вы сделаете это, параметры диаграммыбольше не будет синхронизироваться с диаграммой, поэтому это может привести к неожиданным проблемам.