Question

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

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>

当有新数据可用时如何更新图表？

1 个答案: