HTML5示波器

Question

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

• http://flotcharts.org/
• http://smoothiecharts.org/

两者都可以实时显示输入的数据，但它们从右向左滚动数据，而我试图完成的正好相反:从左到右绘制新数据，当页面结束时，在扫描中覆盖以前的数据(就像大多数示波器一样)。如果图表可以同时进行扫描和滚动，那就更好了。但直到现在我发现的所有部件都只支持泡沫。

下面是我想要的那种显示的视频：http://www.youtube.com/watch?v=chZqN605Iz4

Answer 1

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

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

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

取自this SO question。希望这对你有帮助。

Answer 2

数据中的任何移动都是通过通过数组移动值和刷新图表来实现的。当数据添加到数组的末尾时，数据似乎是从右边传来的。不要使用push()将数据添加到数组中，而是使用unshift()，数据将添加到起始位置或向左添加。

Answer 3

转化为SmoothieCharts集scrollBackwards=true；