从 VueJS 中的 axios 请求获取数据后，Highcharts 不会重绘

Question

[在此处输入图片描述][1]> 我正在使用 Laravel Vue JS。我能够获取数据并将其分配到我的 chartOptions.series 中。主要问题是图表不会重绘。我在全球范围内声明了我的 highcharts，这是一个将导入到我的仪表板中的子组件。下面是我的代码。

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

<script>

    export default {
        data(){
            return{
                data:{
                    males: '',
                    females: '',
                },
                chartOptions: {
                    title:{
                        text: 'Applicants Account by Gender'
                    },
                    chart:{
                        type: 'column'
                    },
                    yAxis: {
                        title: {
                            text: 'Number of Applicant Accounts'
                        },
                        tickInterval: 2,
                        crosshair: true,
                    },
                    plotOptions: {
                        series: {
                            dataLabels: {
                                enabled: true,
                                inside:true,
                            }
                        }
                    },
                    series: [{
                        name: 'Male',
                        data: [],
                    },
                    {
                        name: 'Female',
                        data: [],
                        color: 'pink',
                    }]
                }
            }
        },
        methods:{
            async loadApplicantsPerGender(){
                await axios.get("/api/dashboard/applicantsPerGender").then(res =>{
                    this.data.males = res.data.males;
                    this.data.females = res.data.females;
                })
            },
        },
        created(){
            this.loadApplicantsPerGender();
            setTimeout(function(){ 
                this.chartOptions.series[0].data = this.data.males;
                this.chartOptions.series[1].data = this.data.females;
            }.bind(this), 3000);
        }
    }
</script>

输出只是一个空图表，像这样。 [1]: https://i.stack.imgur.com/Vgxma.png

我已经尝试在 highchart 标签中添加 :updatedArgs 但它仍然不起作用，尝试使用 watch() 更新系列数据。

Answer 1

你试过高位图重绘吗API

https://api.highcharts.com/class-reference/Highcharts.Chart#redraw

Answer 2

您需要将数据调整为 Highcharts 要求的格式。在你的情况下它将是：

this.chartOptions.series[0].data = [this.data.males];
this.chartOptions.series[1].data = [this.data.females];

现场演示： https://codesandbox.io/s/highcharts-vue-demo-fork-chudkw?file=/src/components/Chart.vue

API参考：https://api.highcharts.com/highcharts/series.column.data

从 VueJS 中的 axios 请求获取数据后，Highcharts 不会重绘

Highcarts won't redraw after fetching data from axios request in VueJS

highcharts

vue.js