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

Question

I grab the example from: https://www.highcharts.com/demo/column-stacked我从以下位置获取示例： https : //www.highcharts.com/demo/column-stacked

Also referring some of the code from: How to use Vue bound data in Highcharts?还参考了一些代码： How to use Vue bound data in Highcharts?

I build a sample as bellow:我构建了一个示例如下：

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

But I don't know why the chart wouldn't redraw after config.series updated ( with higher value of each category).但我不知道为什么在 config.series 更新后图表不会重绘（每个类别的价值更高）。

Answer 1

The problem is your config watcher only watch the change of config not its nested properties so this.config.series = [...] won't trigger your watcher.问题是你的config守望者只能眼睁睁的变化config不其套装属性，以便this.config.series = [...]将不会触发您的守望者。

First solution, use deep option:第一个解决方案，使用deep选项：

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

Demo演示

Second solution, use spread syntax to assign the whole object:第二种解决方案，使用扩展语法来分配整个对象：

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

Demo演示

Answer 2

Here is the solution for you:这是为您提供的解决方案：

Destruct the config object in render method to lose a reference:在 render 方法中销毁配置对象以丢失引用：

\nrender() {使成为（） {              \n    this.chart = Highcharts.chart('container', {...this.config}); this.chart = Highcharts.chart('container', {...this.config});\n} }\n

Change your config watcher to deep (that way watcher will react when you are changing property that belongs to the object eg this.config.series = [...] ):将您的配置观察者更改为 deep（这样观察者会在您更改属于对象的属性时做出反应，例如this.config.series = [...] ）：
```
\nconfig: {配置：{\n    deep: true,深：真实，\n    handler() {处理程序（）{\n        this.render(); this.render();\n    } }\n} }\n
```

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-01-11 18:38:13

解决方案2
0 2020-01-11 18:50:05

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-01-11 18:38:13

解决方案2 0 2020-01-11 18:50:05

解决方案1
0 已采纳 2020-01-11 18:38:13

解决方案2
0 2020-01-11 18:50:05