如何在Highcharts中使用Vue绑定数据? [英] How to use Vue bound data in Highcharts?
问题描述
我有一张图表，其中轴的内容和数据将随时间变化.这是在Vue框架中发生的.
I have a chart which axis contents and data will change with time. This happens in a Vue framework.
我的想法是使用 setData()和 setCategories()为图表指针提供动态数据.这不起作用:更新数据时，图表无法更新.
My idea was to use setData() and setCategories() to give the chart pointers to data which will be dynamic. This does not work: when data is updated, the chart is not.
该示例在 Codepen.io 中，并在下面复制以供参考.请注意，这会挂起我的浏览器(但是codepen版本可以)
The example is in Codepen.io and reproduced below for reference. Please note that this hangs my browser (but the codepen version is OK)
new Vue({
el: "#app",
data: {
config: {
chart: {
type: 'heatmap'
},
series: [{}]
},
src: ['a', 'b'],
dst: ['x', 'y'],
data: [[0, 0, 1], [0, 1, 2], [1, 0, 3], [1, 1, 4]],
chart: undefined
},
mounted() {
this.chart = Highcharts.chart('container', this.config)
console.log(this.chart)
// the content of the axis and the data will be dynamic
this.chart.series[0].setData(this.data, true)
this.chart.xAxis[0].setCategories(this.src, true)
this.chart.yAxis[0].setCategories(this.dst, true)
// simulation of some data changing after some time
setTimeout(() => {
this.data = [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]]
// console.log('updated')
}, 3000)
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="app">
<div id="container">
</div>
</div>推荐答案
要允许图表自动更新，您需要使用观察者或在视图中使用它们来观察vue变量.
To allow the chart to automatically update, you need to watch the vue variables using a watcher or by using them in the view.
我正在使用以下步骤:
-
由于Highcharts在运行之前需要页面上的真实元素，因此我们无法在视图内部直接使用它们，我们需要在可更改的字段上使用观察程序.
Since Highcharts requires a real element on the page before it works, we cannot use them directly inside the view, and we need to use a watcher on the fields that can change.
我们首先将图表渲染代码提取到一个单独的函数中，这使我们可以从多个位置调用该方法.
We first extract our chart render code into a seperate function, this allows us to call the method from multiple places.
然后，我们为图表所需的变量添加观察者，并在这些观察者中调用渲染函数.
Then we add watchers for the variables our chart requires, and inside those watchers, we call our render function.
最后，我们在已安装的方法中呈现图表.
Finally, we render our chart inside the mounted method.
从这一点来看，我们可以看到我们使用的库，Highcharts还支持根据更改动态更新数据，我们可以利用它来避免重新呈现整个元素，并在此处节省一些CPU周期.
From this point, we can see that the library we use, Highcharts also supports updating the data dynamically on changes, we can use this in our advantage to prevent re rendering the full element, and save some CPU cycles here.
new Vue({
el: "#app",
data: {
chart: undefined,
config: {
chart: {
type: 'heatmap'
},
series: [{}]
},
src: ['a', 'b'],
dst: ['x', 'y'],
data: [[0, 0, 1], [0, 1, 2], [1, 0, 3], [1, 1, 4]]
},
mounted() {
this.render();
// simulation of some data changing after some time
setTimeout(() => {
this.data = [[0, 0, 10], [0, 1, 20], [1, 0, 30], [1, 1, 40]]
console.log('updated')
}, 3000)
},
watch: {
data() {
this.chart.series[0].setData(this.data, true)
},
config() {
this.render();
},
src() {
this.chart.xAxis[0].setCategories(this.src, true)
},
dst() {
this.chart.yAxis[0].setCategories(this.dst, true)
},
},
methods: {
render() {
this.chart = Highcharts.chart('container', this.config)
// the content of the axis and the data will be dynamic
this.chart.series[0].setData(this.data, true)
this.chart.xAxis[0].setCategories(this.src, true)
this.chart.yAxis[0].setCategories(this.dst, true)
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.0.6/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<div id="app">
<div id="container">
</div>
</div>这篇关于如何在Highcharts中使用Vue绑定数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
