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

在VueJS中更新Highcarts系列数据来自axios请求的形式

1 个答案: