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;