Question

我目前无法同时显示两个图表。数据

我编写的代码可确保一次通过websocket发送传感器数据，即，一个传感器读数通过websocket发送，然后绘制图形，然后再将另一个传感器读数通过websocket发送并绘制图形。但是我的问题是，由于它们一次发送一次，所以两个读数都设置为一个变量，然后对该单个变量进行绘图。

由于我是JavaScript的新手，并且使用chart.js，所以我完全不知道如何解决此问题。

基本上，我想通过websocket发送两个传感器值，为每个传感器创建一个变量，然后在单个图表上绘制两个值。

因此，首先，下面的代码的第一段确保两个传感器值分别通过websocket发送：

void getData(){

  //Grabs data from sensor and formats it to json string
  String json;
  if(count%2==0)
  {
    Serial.println("Yes");
    json += "{\"value\":";
    json += Thermocouple->readCelsius();
    json += "}"; 
    count++;
  }
  else
  {
    Serial.println("No");
    json += "{\"value\":";
    json += thermocouple.readCelsius();
    json += "}"; 
    count++;
  }
    webSocket.broadcastTXT(json.c_str(), json.length());
  }

在此之后，将解析JSON字符串：

webSocket.onmessage = function(event)
{
      var data = JSON.parse(event.data);
      var today = new Date();
      var t = today.getHours()+ ":" + today.getMinutes() + ":" + ...
      addData(t, data.value)
 }

addData函数：

function addData(label, data)
 {
    dataPlot.data.labels.push(label);
    dataPlot.data.datasets[0].data.push(data);
    dataPlot.update();

  }

图表功能

function init(){
    webSocket = new WebSocket('ws://' + window.location.hostname + ':81/');
    dataPlot = new Chart(document.getElementById("line-chart"),{
      type: 'line',
      data: {
        datasets: [{
          data: [],
          label: "Thermocouple 1",
          borderColor: "#3e95cd",
          fill: true

          },
       {
          data: [],
          label: "Thermocouple 2",
          borderColor: "  #FF0000",
          fill: true

          }]
        }
      });

正如我说的那样，我对这一切都很陌生，所以请大方：D

基本上，我想通过websocket发送两个传感器值，为每个传感器创建一个变量，然后在单个图表上绘制两个值。

目前，以上代码的结果是两个传感器值都绘制在一条线上，在两个传感器值之间交替显示。

Answer 1

我设法使代码正常工作。首先通过网络套接字发送传感器值：

 String json = "{\"value\":";
  json +=  Thermocouple->readCelsius();
  json += ",";
  json += "\"value2\":";
  json += double(thermocouple.readCelsius());
  json += "}"; 

  webSocket.broadcastTXT(json.c_str(), json.length());

然后解析json字符串并“提取”值：

webSocket.onmessage = function(event){
      var data = JSON.parse(event.data);
      console.log(data.value);
      console.log(data.value2);
      var today = new Date();
      var t = today.getHours()+ ":" + today.getMinutes() + ":" + today.getSeconds();
      addData(t, data.value, data.value2)
    }

我将这些值记录到控制台中只是为了确保正确解析了这些值。最后将数据添加到图中：

function addData(label, data, data2){

    if(dataPlot.data.labels.length > maxDataPoints)removeData();
    dataPlot.data.labels.push(label);//x-values
    dataPlot.data.datasets[0].data.push(data);
    dataPlot.data.datasets[1].data.push(data2);

    dataPlot.update();

  }

使用javascript和chart.js在

1 个答案: