Question

我正在尝试从设备列表中检索数据，并根据设备的数量，它将绘制图表上的数据。数据也会每隔一秒更新一次，换句话说，我希望图表能够在＆＃34;实时＆＃34;

中保持数据的图形化

这是我目前的代码

的index.html

<div v-for="data in devices">
    <line-chart :data="[[data.time, data.value]]"></line-chart>
</div>

脚本（Vue实例）

var displayDataArray = [];

var socket = io.connect();
  socket.on('stream', function (sensorData) {
    app.devices = sensorData.deviceList;
    ProcessData(app.devices);
  });

  function ProcessData(dataObject) {
    var sensorValue;
    for (sensorValue in dataObject) {
      var deviceValue = dataObject[sensorValue];
      displayDataArray.push([deviceValue.timestamp, parseInt(deviceValue.lux)]);
    }
  }

  var app = new Vue({
    el: "#app",
    data: {
      devices: {},
      chartData: displayDataArray
      },
    methods: {
      update() {
        console.log(this.devices);
      }
    }
  });

但是，数据总是在一个点上绘制。它不会附加到数组上。如果我在:data="chartData"中绑定<line-chart>，它将使用第二个设备上的数据（如果有两个设备被传递到devices对象中）以在两个图上显示。

是否有实现此功能的好方法？

仅供参考，这是对象devices的样子

devices's object 谢谢你的帮助！

Answer 1

以下内容符合您的要求：

var socket = io.connect();
socket.on('stream', function(sensorData) {
    app.devices = sensorData.deviceList;
});

var app = new Vue({
    el: "#app",
    data: {
        devices: {},
        chartData: {}
    },
    watch: {
        devices (newValue) {
            let chartData = this.chartData
            for(device in newValue) {
                let deviceValue = newValue[device]
                if(!chartData[device])
                    chartData[device] = []
                chartData[device].push([deviceValue.timestamp, parseInt(deviceValue.lux)])
            }
        }
    }
});

使用v-for="device in chartData"？

VueJS - 将数据推送到V-Bind

1 个答案: