有新数据时如何更新图表？答案

【问题标题】：How to update chart when new data is available?有新数据时如何更新图表？
【发布时间】：2018-11-14 17:29:19
【问题描述】：

之前我的图表是自动更新的，但在我解析数据的方式发生了一些变化之后，它们现在只有在我更改视图时才会呈现。环顾一番后，似乎我需要调用一个更新函数，但我不确定如何引用它以及在哪里调用它？

<template>
    <div class="container">
     <line-chart v-for="(photon,key) in photons" :key="photon.id" :ytitle="key" :data="photon.psVoltage" ytitle="ps-voltage" height="250px"></line-chart>
    </div>
</template>

<script>
    let psVoltage = [];
    let photons = {};   

    export default {
        data() {
            return {
                photons,
            }
        },

        mounted() {
            this.streamData();
        },
        methods: {
            streamData() {

                // LIVE PUSH EVENTS
                if (typeof (EventSource) !== "undefined") {
                    var eventSource = new EventSource(
                        "http://10.10.30.13:8030/v1/Events/?access_token=687b5aeb26375742de5d36b65f");
                    eventSource.addEventListener('open', function (e) {
                        console.log("Opened connection to event stream!");
                    }, false);

                    eventSource.addEventListener('error', function (e) {
                        console.log("Errored!");
                    }, false);

                    eventSource.addEventListener('ps-voltage', function (e) {
                        var parsedData = JSON.parse(e.data);
                        if (parsedData.coreid in photons) {
                            photons[parsedData.coreid].psVoltage.push([parsedData.published_at, parsedData.data])
                        } else {
                            photons[parsedData.coreid] ={}
                            photons[parsedData.coreid].psVoltage=[]

                        }
                    }, false);

                }

            }
        }
    }
</script>
<style scoped>
    h2 {
        text-align: center;
    }

</style>

【问题讨论】：

标签： javascript vue.js charts chartkick

【解决方案1】：

您的数据必须在 Vue 的数据中并添加更新数据方法

<template>
    <div class="container">
     <line-chart v-for="(photon,key) in photons" :key="photon.id" :ytitle="key" :data="photon.psVoltage" ytitle="ps-voltage" height="250px"></line-chart>
    </div>
</template>

<script>    
    export default {
        data() {
            return {
                psVoltage: null,
                photons: null,
            }
        },

        mounted() {
            this.streamData();
        },
        methods: {
            updateData(e) {
                var parsedData = JSON.parse(e.data);
                if (parsedData.coreid in this.photons) {
                    this.photons[parsedData.coreid].psVoltage.push([parsedData.published_at, parsedData.data])
                } else {
                    this.photons[parsedData.coreid] ={}
                    this.photons[parsedData.coreid].psVoltage=[]

                }
            },
            streamData() {

                // LIVE PUSH EVENTS
                if (typeof (EventSource) !== "undefined") {
                    var eventSource = new EventSource(
                        "http://10.10.30.13:8030/v1/Events/?access_token=687b5aeb26375742de5d36b65f");
                    eventSource.addEventListener('open', function (e) {
                        console.log("Opened connection to event stream!");
                    }, false);

                    eventSource.addEventListener('error', function (e) {
                        console.log("Errored!");
                    }, false);

                    eventSource.addEventListener('ps-voltage',updateData , false);

                }

            }
        }
    }
</script>
<style scoped>
    h2 {
        text-align: center;
    }

</style>

【讨论】：