Question

我有一个图表，轴内容和数据会随时间变化。这发生在Vue框架中。

我的想法是使用setData()和setCategories()来提供动态数据的图表指针。这不起作用：更新数据时，图表不会。

示例位于Codepen.io，并在下面转载以供参考。请注意，这会挂起我的浏览器（但是codepen版本没问题）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

要允许图表自动更新，您需要使用观察程序或在视图中使用它们来观察vue变量。

我正在使用以下步骤：

由于Highcharts在页面工作之前需要一个真实的元素，我们不能直接在视图中使用它们，我们需要在可以更改的字段上使用观察者。
我们首先将图表渲染代码提取到一个单独的函数中，这样我们就可以从多个地方调用该方法。
然后我们为图表需要的变量添加观察者，在这些观察者中，我们称之为渲染功能。
最后，我们在挂载的方法中渲染我们的图表。

从这一点来看，我们可以看到我们使用的库，Highcharts也支持动态更新数据，我们可以利用它来防止重新呈现完整元素，并在这里节省一些CPU周期。

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绑定数据？

1 个答案: