ajax - 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);

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

Answer 2

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

Answer 3

进入 SmoothieCharts 设置 scrollBackwards=true;