HTML5 示波器答案

【问题标题】：HTML5 OscilloscopeHTML5 示波器
【发布时间】：2017-03-17 23:26:50
【问题描述】：

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

两者都可以实时显示传入的数据，但是它们从右到左滚动数据，我尝试完全相反：从左到右绘制新数据，当在页面末尾时，覆盖扫描中的先前数据（如大多数示波器）。如果图表可以同时进行扫描和滚动两种模式，那就更好了。但是到目前为止我发现的所有组件都只支持泡沫。

这是我所追求的那种展示的视频：http://www.youtube.com/watch?v=chZqN605Iz4

【问题讨论】：

【解决方案1】：

尝试更改 SmoothieCharts 的来源以反转方向，但未成功。但是，这并不意味着花费更多的时间和精力就不可能。它似乎是基于时间戳的，因此您可以只反转时间戳（从更高的值开始并反转）。

否则，一个想法是简单地翻转 HTML5 画布作为后处理步骤。这样你就不必跳进图书馆了。就在渲染步骤的最后添加如下内容：

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

取自this SO question。希望对您有所帮助。

【讨论】：

感谢您的努力！我认为翻转画布是一个聪明的主意，但是一旦我在图表中添加文本（用于 X/Y 标签），它也会出现“镜像”，所以我恐怕很快就会遇到麻烦。我将尝试使用 SmoothieCharts 源代码，看看是否可以更改时间戳。

【解决方案2】：

数据中的任何移动都是通过在数组中移动值并刷新图表来实现的。数据似乎来自右侧，因为它被添加到数组的末尾。不要使用push() 将数据添加到您的数组中，而是使用unshift()，数据将被添加到开头或似乎添加到左侧。

【讨论】：

【解决方案3】：

进入 SmoothieCharts 设置 scrollBackwards=true;

【讨论】：