javascript - 有新数据时如何更新图表？

Question

早些时候，我的图表是自动更新的，但在对我解析数据的方式进行了一些更改后，它们现在仅在我更改 View 时才会呈现。环顾四周后似乎我需要调用一个更新函数，但我不确定如何引用它以及在哪里调用它？

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

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