Обновить запрос данных серии Highcarts в VueJS

Question

Я пытаюсь обновить данные серии в моем Highchart.Я использую компонент highcharts-vue.

В моем шаблоне у меня есть:

<highcharts :options="chartOptions"></highcharts>

В data моего Vue компонента у меня есть:

data () {
    return {
        chartOptions: {
            chart: {
                height: 300,
                type: 'line'
            },
            title: {
                text: 'Amount of visitors per day'
            },
            series: [{
                name: 'Visitors',
                data: [],
                color: '#44B8D6'
            }]
        }
    }
},

И мой Axios запрос:

const vm = this;
const request = 'get_visitors';
this.$http({
    method:'get',
    url:'/api',
    params: {
        request: request
    },
    responseType:'json'
})
.then(function(response) {
    let setData = [];
    for (let i = 0; i < response.data.length; i++) {
        setData.push(response.data[i].data)
    }
    setData = setData.map(Number);
    console.log(setData);
    vm.chartOptions.series.data = setData
})
.catch(function(error) {
    console.log(error)
});

Но график не обновляется.console.log(setData) на самом деле показывает мне массив, поэтому запрос идет нормально.

Есть мысли?

Answer 1

Я считаю, что ваша проблема в этой строке:

vm.chartOptions.series.data = setData

Поскольку series - это массив, вам нужно указать, в каких series новых данных вы, например, так:

vm.chartOptions.series[0].data = setData

Вы можете найти пример здесь: https://jsbin.com/heyayogudo/edit?html,js,output