Question

我在单个图形上显示两个数据集时遇到问题。从技术上讲，两个数据点都在图表中，但是两个值都在一行上。请参见下面的图表。

因此，首先解析值：

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){

    dataPlot.data.labels.push(label);//x-values
    dataPlot.data.datasets.forEach((dataset)=> {
          dataset.data.push(data);
          dataset.data.push(data2);
    });
    dataPlot.update(); 
  }

最后是对应图表的代码：

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

          }]
        }
      });

我认为这里可能还会有一个错误，因为我不知道如何“声明”两个不同的数据集。

我对javascript很陌生。

因此，如上所述，结果是在图表上绘制了一条线，但同时具有两个值。因此，加热其中一个热电偶会产生基本上像山脉的图形。Graph

Answer 1

首先，这里不需要foreach，否则在声明2时将在数据集中推送4个数据：

dataPlot.data.datasets.forEach((dataset)=> {
      dataset.data.push(data);
      dataset.data.push(data2);
 });

尝试这两个选项之一：

手动执行操作（无foreach）：

dataPlot.data.datasets.push(data);
dataPlot.data.datasets.push(data2);

或，创建一个数据数组，然后在该数组上创建forEach：

dataArray.forEach( (item) => {
    dataPlot.data.datasets.push(item);
});

PS：对于第二个选项，您需要确保dataArray.length == dataPlot.data.datasets.length

如何使用chartjs

1 个答案: