Vue数据更改后，Highcharts图表未重绘

Question

我从https://www.highcharts.com/demo/column-stacked中获取示例

还引用以下代码：How to use Vue bound data in Highcharts?

我创建了一个示例，如下所示：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/7.1.1/highcharts.js"></script>
    </head>
    <body>      
        <div id="app">
           <div id="container">
        </div>
        </div>
    </body>
</html>
<script>
    new Vue({
        el: "#app",
        data: {
            chart: undefined,
            config: {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    },
                    stackLabels: {
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: ( // theme
                                Highcharts.defaultOptions.title.style &&
                                Highcharts.defaultOptions.title.style.color
                            ) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'right',
                    x: -30,
                    verticalAlign: 'top',
                    y: 25,
                    floating: true,
                    backgroundColor:
                        Highcharts.defaultOptions.legend.backgroundColor || 'white',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    shadow: false
                },
                tooltip: {
                    headerFormat: '<b>{point.x}</b><br/>',
                    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                series: [{
                    name: 'John',
                    data: [3, 3, 4, 8, 2]
                }, {
                    name: 'Jane',
                    data: [3, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 3, 5]
                }]
            },
        },
        mounted() {
            this.render();
            // simulation of some data changing after some time
            setTimeout(() => {
                this.config.series = [{
                    name: 'John',
                    data: [53, 23, 24, 27, 32]
                }, {
                    name: 'Jane',
                    data: [23, 22, 23, 32, 31]
                }, {
                    name: 'Joe',
                    data: [33, 24, 24, 32, 35]
                }]
                console.log('updated')


            }, 3000)
        },
        watch: {
            config() {
                this.render();
            },
        },
        methods: {
            render() {              
                this.chart = Highcharts.chart('container', this.config)
            }
        }
    })

</script>

但是我不知道为什么config.series更新后图表不重绘（每个类别的值都较高）。

Answer 1

问题是您的config监视程序仅监视config的更改，而不监视其嵌套属性，因此this.config.series = [...]不会触发您的监视程序。

第一个解决方案，使用deep选项：

watch: {
  config: {
    handler() {
      this.render()
    },
    deep: true
  }
}

Demo

第二个解决方案，使用扩展语法分配整个对象：

this.config = {
  ...this.config,
  series: [{ /* */ }]
}

Demo

Answer 2

这是您的解决方案：

破坏render方法中的config对象以丢失引用：

render（）{this.chart = Highcharts.chart（'container'，{... this.config}）;}

将您的配置监视程序更改为更深（当您更改属于对象的属性，例如this.config.series = [...]时，监视程序会做出反应：]
```
配置：{深：正确，handler（）{this.render（）;}}
```

Vue数据更改后，Highcharts图表未重绘

问题描述投票：0回答：1

1个回答

最新问题

Vue数据更改后，Highcharts图表未重绘

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1