时间戳

首页 > 解决方案 > vue数据更改后Highcharts图表未重绘

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

问题描述

我从以下网址获取示例：https ://www.highcharts.com/demo/column-stacked

还参考了一些代码：如何在 Highcharts 中使用 Vue 绑定数据？

我建立一个样本如下：

<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 更新后图表不会重绘（每个类别的值更高）。

标签： javascriptvue.jshighcharts

解决方案

问题是您的config观察者只观察config其嵌套属性的变化，因此this.config.series = [...]不会触发您的观察者。

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

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

演示

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

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

演示

推荐阅读