Ajax HTML5示波器

我需要一个免费的实时图表（最好是HTML5），它可以像示波器一样绘制输入信号。我发现两个例子非常接近我想要的：

两者都可以实时显示输入的数据，但它们会从右向左滚动数据，而我尝试的恰恰相反：从左向右绘制新数据，当页面结束时，在扫描中覆盖以前的数据（与大多数示波器一样）。如果图表可以同时执行两种模式，扫描和滚动，那就更好了。但我找到的所有组件现在只支持泡沫

---

这是一个我正在关注的显示类型的视频：

试图改变SmoothieCharts的来源以反转方向，但没有成功。然而，这并不意味着需要更多的时间和努力就不可能实现。它似乎是基于时间戳的，所以您可以反转时间戳（从更高的值开始，然后反转）

否则的话，可以简单地翻转HTML5画布作为后处理步骤。这样你就不必那么频繁地跳进图书馆。仅在渲染步骤的末尾添加以下内容：

canvasContext.translate(width, 0);
canvasContext.scale(-1, 1);
this.canvasContext.drawImage(image, 0, 0);

---

摘自。希望这对您有所帮助。

数据中的任何移动都是通过在数组中移动值并刷新图表来实现的。将数据添加到数组末尾时，数据似乎来自右侧。不要使用

push（）

将数据添加到数组中，而是使用

unshift（）

将数据添加到起始位置或显示为添加到左侧

进入SmoothieCharts设置scrollBackwards=true

谢谢你的努力！我认为翻转画布是一个明智的想法，但一旦我将文本添加到图表（对于X/Y标签），它也会显示为“镜像”，因此我担心很快就会遇到麻烦。我将尝试使用SmoothieCharts源代码，看看是否可以更改时间戳。