vue数据更改后，Highcharts图表未重绘 [英] Highcharts chart didn't redraw after vue data changed
问题描述
我从以下示例中获取示例: https://www.highcharts.com/demo/column-堆积
I grab the example from: https://www.highcharts.com/demo/column-stacked
还引用了以下代码:如何使用Vue绑定数据在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更新后图表不重绘(每个类别的值都更高).
But I don't know why the chart wouldn't redraw after config.series updated ( with higher value of each category).
推荐答案
问题是您的 config 监视程序仅监视 config 的更改，而不监视其嵌套属性，因此 this.config.series = [...] 不会触发您的观察者.
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.
第一个解决方案，请使用 deep 选项:
First solution, use deep option:
watch: {
config: {
handler() {
this.render()
},
deep: true
}
}
第二个解决方案，使用传播语法分配整个对象:
Second solution, use spread syntax to assign the whole object:
this.config = {
...this.config,
series: [{ /* */ }]
}
这篇关于vue数据更改后，Highcharts图表未重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
