javascript - 带有 vue-chartjs 的实时图表

Question

我有一些设备正在尝试从他们收集的数据中构建实时图表。目前我正在尝试读取并显示他们的 wifi 信号强度，但我无法将它们联系在一起。我将如何根据已发布的数据构建 Xaxis，并绘制 wifi 信号图表？

parsedData 变量的示例

{coreid: "1f0039000547363339343638", data: "-21", published_at: "2018-11-02T17:36:15.794Z", ttl: 60}

家.vue

<template>
  <div>
    <line-chart :chart-data="chartData" />
  </div>
</template>
<script>
  import LineChart from '@/components/lineChart'
  let wifiSignal = []

  export default {
    components: {
      LineChart
    },

    data() {
      return {
        wifiSignal: null,
        datacollection: null,
        probes: [],
        probe: [],

        chartData: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
            'November', 'December'
          ],
          datasets: [{
            label: 'Wifi Signal',
            backgroundColor: '#f87979',
            data: this.wifiSignal

          }]
        }
      }
    },
    created() {
      this.streamData()
    },
    mounted() {

      // grab probe data
      axios.get('http://10.10.10.1:8080/v1/devices')
        .then((res) => {
          (this.probes = res.data)
          // console.log(res.data)
        }).catch((error) => {
          console.log(error.res);
        });



    },

    methods: {
      streamData() {
        // LIVE PUSH EVENTS
        if (typeof (EventSource) !== "undefined") {
          var eventSource = new EventSource(
            "http://10.10.10.1:8080/v1/Events");
          eventSource.addEventListener('open', function (e) {
            console.log("Opened connection to event stream!");
          }, false);

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

          eventSource.addEventListener('WiFi Signal', function (e) {
            var parsedData = JSON.parse(e.data);
            let cat = parseInt(parsedData.data)
            console.log(cat)
            wifiSignal.push(cat);
          }, false);    
        }

      }
    },

  };
</script>

线图.js

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  }
}

标签： javascriptvue.jschartsecmascript-6vue-chartjs