javascript - 如何实时绘制具有静态范围的心电波？

Question

我正在使用 CanvasJs 绘制实时心电图波，如果我使用数组的大小，一切都很好，但是当我尝试设置该大小(例如 478 点)时，这不会显示即将到来的新数据，图表是静态的，但我正在发送新数据。

该图表的代码是下一个:

 maxDataLength = 478;
 dataLenght = 0;

   if (result.length !== maxDataLength) {
        for (var i = dataLength; i < result.length; i++)
            {
                data.push({
                    x: parseInt(result[i].valorx),
                    y: parseFloat(result[i].valory)
                });
               if (data.length > maxDataLength) {
               data.shift()}
            }
            dataLength = result.length;
            chart.render();
        }
  });

问题是图表未加载新数据。

下一个代码对我有用:

dataLength = 0;

if (dataLength !== result.length) {
  for (var i = dataLength; i < result.length; i++) 
        {
            data.push({
                x: parseInt(result[i].valorx),
                y: parseFloat(result[i].valory)
            });
           if (data.length > result.length) {
           data.shift()}
        }
        dataLength = result.length;
        chart.render();
    }
});

但是这个图显示了数组的所有数据，看起来很糟糕，如果你知道如何解决这个任务，请告诉我。

Answer 1

检查此 maxDataLength 的唯一位置是在执行循环之前:

if (result.length !== maxDataLength) {

当达到 maxDataLength 时，如何停止循环？这是您的工作代码，修复了拼写错误，并在 for 循环中进行了一项额外检查，以将计数器与 maxDataLength 进行比较:

maxDataLength = 478;
dataLength = 0;

if (dataLength !== result.length) {
    for (var i = dataLength; i < result.length && i <= maxDataLength; i++) {
        data.push({
            x: parseInt(result[i].valorx),
            y: parseFloat(result[i].valory)
        });
        if (data.length > result.length) {
            data.shift();
        }
        dataLength = result.length;
        chart.render();
    }
}

(这段代码充满了拼写错误，我不认为它首先会起作用。)