Как обновить график при появлении новых данных? - PullRequest
Новая
       20

Как обновить график при появлении новых данных?

0 голосов
/ 14 ноября 2018

Раньше мои диаграммы обновлялись автоматически, но после некоторых изменений в том, как я анализирую данные, они теперь отображаются только при смене представлений. После некоторого осмотра кажется, что мне нужно вызвать функцию обновления, но я не уверен, как ссылаться на нее и где ее вызывать? 

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

1 Ответ

0 голосов
/ 14 ноября 2018

Ваши данные должны быть внутри данных 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>
...