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

Question

我想制作一个每两秒更新一次的折线图,不需要刷新页面(它会从服务器上更新的单独文件中获取信息),是他们的任何JavaScript库(除了JQuery之外)那会很容易吗？任何人都可以在网页上显示平均值吗？在1到10的范围内,这会有多难？(10很难)

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

Answer 1

我建议使用Smoothie Charts.

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

免责声明:我是图书馆的撰稿人.

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

出于性能原因,我最初还试图找到"不是每次都重绘整个图表"的解决方案.但后来我意识到这是一个谬论.任何解决方案都必须为每一帧重绘图表.想一想:你的显示器如何工作？它不断从头开始刷新,它不会移动像素.因此,任何允许您"不重绘图表"的图表库只是为您提供抽象.这种抽象是方便和可取的; 然而,在性能方面,它仍然在每个帧的背景中重绘图表. (4认同)

Answer 3

有几件事可能会对你有所帮助:

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

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

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

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

Answer 4

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

开源(虽然商业网站需要许可证),跨设备/浏览器,快速.