带有 Websocket 或 Socket.io 的 Vue.js 实时图表

Posted 2023-02-16

【中文标题】带有 Websocket 或 Socket.io 的 Vue.js 实时图表

【英文标题】：Vue.js Realtime Chart with Websocket or Socket.io

【发布时间】：2020-12-19 14:12:51

【问题描述】：

我在我的项目中使用 vue.js。我也为我的数据使用 websocket。每一秒都有数据。我需要在我的项目中使用实时图表。但我没有找到任何图表来解决我的问题。例如，我使用 apexchart，但当有新数据出现时，它没有刷新图表中的数据。

我的 websocket 数据如下：

   "topic": "2",
   "message": "data"

我的数据库数据如下：

  
    "id": "1",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  ,
  
    "id": "8",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  ,

我在这段代码中从数据库中获取我的数据。我检查了我的主题，是否相同。如果相同，我将 websocket 消息放入 json 数据以在屏幕上查看：

let bufferMessage = [];
   bufferMessage = jsonFromDatabase;
   socket.on("message", (topic, message) => 
       bufferMessage.forEach(element => 
       if (element.topic == topic) 
           element.message = message.toString();
       
    );
 );

我的代码是：

<div id="chart">
  <apexchart type="line"  :options="chartOptions" :series="$store.state.bufferMessage[index].message"></apexchart>
</div>

<script>
    import Vue from "vue";
    import ApexCharts from "apexcharts";
    import VueApexCharts from "vue-apexcharts";
    Vue.component("apexchart", VueApexCharts);
    
    export default 
      components: 
        apexchart: VueApexCharts,
      ,
      data() 
        return 
          series: [
            
              name: "Desktops",
              data: [],
            ,
          ],
          chartOptions: 
            chart: 
              height: 350,
              type: "line",
              zoom: 
                enabled: false,
              ,
            ,
            dataLabels: 
              enabled: false,
            ,
            stroke: 
              curve: "straight",
            ,
            title: 
              text: "Product Trends by Month",
              align: "left",
            ,
            grid: 
              row: 
                colors: ["#f3f3f3", "transparent"],
                opacity: 0.5,
              ,
            ,
            xaxis: 
              categories: [],
            ,
          ,
    
</script>

但是这段代码没有任何错误的方式。我只想将此图表转换为我的 websocket 数据的实时图表。

【问题讨论】：

请包含您尝试更新数据的代码部分

图表从series[0].data获取数据。但我的 websocket 数据来自我的 vuex 作为数组。我使用v-for 以html 代码获取我的数组。它无法实时运行。

您说您的图表从series[0].data 获取数据，但在上面的代码中我可以清楚地看到您的图表从$store.state.bufferMessage[index].message 获取数据。 - 所以请包括您尝试更新$store.state.bufferMessage[index].message的代码部分。

感谢更新。恐怕在这种状态下，我不清楚您的数据实际上是什么样子，您正试图在图表中显示。在上面的代码中，您尝试将数据设置为 series 数据只是一个字符串。字符串不是图表中series 数据的有效值。你需要一个值数组。

【参考方案1】：

除非OP显示更新数据的代码部分，否则我只能提供apexcharts官方文档的参考，关于更新数据：

import VueApexCharts from 'vue-apexcharts'

export default 
 name: 'Vue Chart',
 data: function () 
  return 
   chartOptions: 
    chart: 
      id: 'vuechart-example',
    ,
    xaxis: 
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
    ,
   ,
   series: [
    name: 'Vue Chart',
    data: [30, 40, 45, 50, 49, 60, 70, 81]
   ]
  
 ,
 methods: 
  updateChart() 
   const max = 90;
   const min = 20;
   const newData = this.series[0].data.map(() => 
     return Math.floor(Math.random() * (max - min + 1)) + min
   )
   // In the same way, update the series option
   this.series = [
    data: newData
   ]
  
 

正如你在上面的例子中看到的，通过改变props，我们触发了ApexCharts的更新事件。 (from the docs)

沙盒示例https://codesandbox.io/s/50z5wrmp6k