Javascript 海图'；在vue数据更改后重新绘制_Javascript_Vue.js_Highcharts

Javascript 海图'；在vue数据更改后重新绘制

javascript vue.js highcharts

Javascript 海图'；在vue数据更改后重新绘制,javascript,vue.js,highcharts,Javascript,Vue.js,Highcharts,我从以下几个方面获取示例：还参考了以下部分代码：我构建了一个示例，如下所示： <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

我从以下几个方面获取示例：

还参考了以下部分代码：

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

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


新Vue({
el:“应用程序”，
数据：{
图表：未定义，
配置：{
图表：{
类型：“列”
},
标题：{
文本：“堆叠柱形图”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯：{
分:0,，
标题：{
正文：“水果总消费量”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（//主题
Highcharts.defaultOptions.title.style&&
Highcharts.defaultOptions.title.style.color
)| |“灰色”
}
}
},
图例：{
对齐：“右”，
x:-30，
垂直排列：“顶部”，
y:25，
浮动：是的，
背景颜色：
Highcharts.defaultOptions.legend.backgroundColor | | |“白色”，
边框颜色：“#CCC”，
边框宽度：1，
影子：错
},
工具提示：{
headerFormat:“{point.x}
”，
pointFormat:“{series.name}:{point.y}
总计：{point.stackTotal}”
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
已启用：true
}
}
},
系列：[{
姓名：'约翰'，
数据：[3,3,4,8,2]
}, {
姓名：'简'，
数据：[3,2,3,2,1]
}, {
名字：'乔'，
数据：[3,4,4,3,5]
}]
},
},
安装的（）{
这个。render（）；
//模拟某些数据在一段时间后的变化
设置超时（（）=>{
this.config.series=[{
姓名：'约翰'，
数据：[53,23,24,27,32]
}, {
姓名：'简'，
数据：[23,22,23,32,31]
}, {
名字：'乔'，
数据：[33,24,24,32,35]
}]
console.log（'updated'）
}, 3000)
},
观察：{
config（）{
这个。render（）；
},
},
方法：{
render（）{
this.chart=Highcharts.chart（'container'，this.config）
}
}
})

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

问题是你的

config

观察者只观察

config

的变化，而不是它的嵌套属性，所以

this.config.series=[…]

不会触发你的观察者

第一种解决方案，使用

deep

选项：

观察：{
配置：{
handler（）{
this.render（）
},
深：是的
}
}

第二种解决方案是，使用扩展语法指定整个对象：

this.config={
…this.config，
系列：[{/**/}]
}

以下是您的解决方案：

在render方法中销毁配置对象以丢失引用：

render() { this.chart = Highcharts.chart('container', {...this.config}); }

现在工作！谢谢现在只有Vue警告：“您可能在watcher中有一个表达式为“config”的无限更新循环“，不确定它是什么意思，但它是警告，不是错误，highcharts仍在工作。我在第一个解决方案中也发现了相同的警告。我认为Vue可以检测到您正在config watcher调用堆栈中使用

this.config

，如果您更新配置值，可能会导致无限更新循环。 config: { deep: true, handler() { this.render(); } }