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

我在项目中使用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" height="350" :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>

从“Vue”导入Vue；
从“ApexCharts”导入ApexCharts；
从“vue-apexcharts”导入VueAppExCharts；
Vue.组件（“apexchart”，VueAppEXCHARTS）；
导出默认值{
组成部分：{
apexchart:VueAppExcharts，
},
数据（）{
返回{
系列：[
{
名称：“台式机”，
数据：[]，
},
],
图表选项：{
图表：{
身高：350，
键入：“行”，
缩放：{
启用：false，
},
},
数据标签：{
启用：false，
},
笔划：{
曲线：“直线”，
},
标题：{
文字：“每月产品趋势”，
对齐：“左”，
},
网格：{
行：{
颜色：[“#F3”，“透明”]，
不透明度：0.5，
},
},
xaxis：{
类别：[]，
},
},
}

---

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

除非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
   }]
  }
 }
}

正如您在上面的示例中所看到的，只需更改道具，我们就会触发ApexCharts的更新事件。（）

沙盒示例

---

除非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
   }]
  }
 }
}

正如您在上面的示例中所看到的，只需更改道具，我们就会触发ApexCharts的更新事件。（）

沙盒示例

---

请包含您尝试更新数据图表的代码部分，该部分数据图表从

系列[0]获取数据。数据

。但我的websocket数据来自vuex as数组。我使用

v-for

以html代码获取数组。它无法实时运行。您说您的图表从

系列[0]获取数据.data

，但在上面的代码中，我可以清楚地看到您的图表从

$store.state.bufferMessage[index].message

-因此请包含您尝试更新

$store.state.bufferMessage[index]的代码部分.message

。感谢您的更新。恐怕在这种状态下，我不清楚您试图在图表中显示的数据实际上是什么样子。在上面的代码中，您试图将数据归类为

系列

数据只是一个字符串。字符串不是图表中

系列

数据的有效值。您需要一个a数组的值。请包括您尝试更新数据图表的代码部分，该部分从

系列[0]获取数据。数据
。但我的websocket数据来自我的vuex as数组。我使用
v-for
以html代码获取数组。它无法实时运行。您说您的图表从
系列[0]获取数据.data
，但在上面的代码中，我可以清楚地看到您的图表从
$store.state.bufferMessage[index].message
-因此请包含您尝试更新
$store.state.bufferMessage[index]的代码部分.message
。感谢您的更新。恐怕在这种状态下，我不清楚您试图在图表中显示的数据实际上是什么样子。在上面的代码中，您试图将数据归类为
系列
数据只是一个字符串。字符串不是图表中
系列
数据的有效值。您需要一个a一组值。请更新您的问题，谢谢！我编辑了我的问题。@PascalLamer请更新您的问题，谢谢！我编辑了我的问题。@PascalLamer