使用html5在折线图上实时数据绘图

Question

我想制作一个每两秒更新一次的折线图，不需要刷新页面（它会从服务器上更新的单独文件中获取信息），是他们的任何JavaScript库（其他）比JQuery）这会让这很容易吗？任何人都可以在网页上显示平均值吗？在1到10的范围内，这将是多么困难？（10很难）

如果重要的话，数据也会以固定的10秒间隔更新。如果可能的话，我想坚持使用CSS3 HTML5和javascript。

Answer 1

我建议Smoothie Charts。

使用起来非常简单，易于使用且可广泛配置，并且可以很好地传输实时数据。

有builder that lets you explore the options and generate code。

免责声明：我是图书馆的撰稿人。

Answer 2

可以使用多个图表库：gRaphael，Highcharts和其他人提到的图表库。这些库非常易于使用且记录良好（比如说难度等级为1）。

AFAIK，这些库并非“实时”，因为它们无法动态添加新点。要添加新点，您需要重绘整个图表。但我认为这不是问题，因为重绘图表的速度很快。我用gRaphael做了一些尝试，我没有注意到这种方法有任何问题。如果你更新率是10s应该可以正常工作（但它可能取决于你的图表的复杂性）。

如果重绘整个图表是个问题，您可能需要自己使用矢量图形库（如Raphael或paper.js）开发图表。这将比使用图表库更难，但应该是可行的。 （在难度等级上说5）。

当你在固定的intervall上获取数据时，你可以使用常规的ajax lib。 jQuery对我来说还可以，但还有其他一些选择。对于非固定间隔，这可能不是最佳选择，在这种情况下，您可能需要查看socket.io之类的内容，但它也会对服务器端产生影响。

注1：Raphael，gRaphael和Highcharts不仅仅是HTML5而是SVG / VML，但我想这也是一个可以接受的选择。

注意2：在插入新点时，Highchart似乎不需要重绘图表。见http://www.highcharts.com/documentation/how-to-use#live-charts

Answer 3

可能对您有所帮助：

Canvas Express是一个功能强大的图表库：http://canvasxpress.org/

在这里，您可以找到关于滚动自己的基于方程式的图表的教程：http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

使用画布解决方案非常简单，您可以使用ajax检索图表的周期性数据，并在每次检索新数据时重绘图表。
由于它是所有客户端，因此您无需刷新页面。

如果你通过javascript和ajax自己的方式，那么它将是一个中等难度。如果你不这样做，你可能不得不在Stack Ovreflow上发布更多问题，以帮助你解决你遇到的问题。

Answer 4

我相信这正是您所寻找的：

http://www.highcharts.com/demo/dynamic-update

开源（虽然商业网站需要许可证），跨设备/浏览器，快速。

Answer 5

Flotr2和Envision是选项。 Flotr2在我链接的doco页面上有一个实时示例。想要开始使用Envision有点困难，所以试试Flotr2。

Answer 6

为了完成这个帖子，我建议你研究一下：

d3.js

这是一个可以帮助实现大量JavaScript可视化的库。然而，学习曲线非常陡峭。

nvd3.js

一个库，可以很容易地创建一些d3.js可视化（当然有限制）。

Answer 7

您可能还想查看基于HTML5 Canvas Element构建的CanvasJS Chart。它渲染速度非常快，可以每50-100毫秒更新一次，而不会遇到内存问题。

[完全披露：我是团队成员]

Answer 8

最简单的方法可能是使用plotti.co - 我为此创建的微服务。这取决于你如何获得数据，但一般使用模式是将SVG图像包含在你的html中

<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>

将GET请求中的数据提供给您的哈希（或使用来自相同或任何其他页面的(new Image(1,1)).src=... JavaScript方法），如下所示：

http://plotti.co/FSktKOvATQ8H?d=1,2,3

在本地设置也很简单

Answer 9

这是我在ChartJS中发现的实时图表的要点：
https://gist.github.com/arisetyo/5985848

ChartJS看起来很简单，看起来不错。

还有FusionCharts，一个更复杂的企业用库，在这里有实时演示：
http://www.fusioncharts.com/explore/real-time-charts

修改 我也开始使用Rickshaw作为实时图表，它易于使用且可定制： http://code.shutterstock.com/rickshaw/

Answer 10

这个帖子现在可能已经很老了。但是想要为看到这个帖子的人分享这些结果。比较一下。 Flotr2，ChartJS，异步高图。 Flotr2似乎是最快的。通过每50ms将一个新数据点传递到1000个数据点来测试它。 Flotr2对我来说是最快的，虽然它似乎是定期重新绘制图表。

http://jsperf.com/async-charts-test/2

Answer 11

您从服务器获取数据，更新以前可用的数据库，然后可能使用一个免费的库来绘制图表[例如：http：//www.rgraph.net/]

您可能想要考虑的事项：如果您的图表代表某个州，请仅使用xhr获取新数据，在客户端更新数据并绘制。

Answer 12

http://www.rgraph.net/非常适合图表和图表。

Answer 13

你也可以试试Meteor Charts，它超级快（html5画布），有很多教程，并且还有很好的文档。实时更新非常有效。您只需更新模型并运行chart.draw（）即可重新渲染场景图。这是一个演示：

http://meteorcharts.com/demo

Answer 14

从2015年开始 据我所知，仍然没有运行时导向的折线图。我的意思是图表哪些行为“每N秒请求新点数”，“清除旧数据”你可以设置“声明”方式。

相反，服务器端有石墨api http://graphite-api.readthedocs.org/en/latest/，使用它的客户端插件数量。但实际上它们非常有限，缺少我们喜欢的高级功能：数据滚动条，范围图表，相位上的axeX分割等。

似乎任务“显示到达图表”和“实时图表”之间存在根本区别。