带有html5的折线图上的实时数据绘图

2020/12/11 08:51 · jquery ·  · 0评论

我想制作一个折线图,每隔几秒钟更新一次,不需要刷新页面(它将从服务器上更新的单独文件中获取信息),它们是任何JavaScript库(不是JQuery)那将使这变得容易吗?谁能在网页上显示卑鄙的例子?从1到10的等级,这有多难?(10很难)

如果重要的话,数据也会以10s的固定间隔更新。而且,如果可能的话,我想只使用CSS3 HTML5和javascript。

可以使用几种图表库:gRaphaelHighcharts和其他人提到的一种。这些库非常易于使用并且有据可查(在难度等级上说1)。

AFAIK,这些库不是“实时”的,因为它们无法即时添加新点。要添加新点,您需要重绘整个图表。但是我认为这不是问题,因为重新绘制图表的速度很快。我已经使用gRaphael进行了一些尝试,但没有发现这种方法有任何问题。如果您将更新速率设置为10s,则应该可以(但是,这可能取决于图表的复杂程度)。

如果重绘整个图表是一个问题,则可能必须使用Raphaelpaper.js之类的矢量图库自行开发图表这将比使用制图库困难一点,但应该可行。(在难度等级上说5)。

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

注意1:Raphael,gRaphael和Highcharts并不是纯粹的HTML5,而是SVG / VML,但我想这也是可以接受的选择。

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

我建议思慕雪图表

它非常易于使用,容易且可广泛配置,并且在流式传输实时数据方面做得很好。

有一个构建器,可让您浏览选项并生成代码

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

可能对您有帮助的几件事:

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

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

使用画布解决方案非常容易。您可以使用ajax检索图形的定期数据,并在每次检索新数据时重新绘制图形。

由于是所有客户端,因此您无需刷新页面。

如果您通过javascript和ajax熟悉自己的方式,那将是一个中等难度。如果您不这样做,则可能必须在Stack Ovreflow上发布更多问题,以帮助您解决遇到的问题。

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

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

开源(尽管商业网站需要许可证),跨设备/浏览器,快速。

Flotr2Envision是选项。Flotr2在我链接的doco页面上有一个实时示例。Envision入门比较困难,因此请尝试Flotr2。

为了完成此主题,我建议您研究一下:

d3.js

这是一个有助于大量JavaScript可视化的库。但是,学习曲线相当陡峭。

nvd3.js

一个使创建d3.js可视化变得容易的库(当然有限制)。

您可能还需要查看基于HTML5 Canvas元素构建的CanvasJS图表它渲染速度非常快,并且可以每50-100毫秒进行更新,而不会遇到内存问题。

[完全公开:我是团队的一员]

最简单的方法可能是使用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

本地设置也很简单

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

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

ChartJS看起来很容易使用,而且看起来不错。

另外还有FusionCharts,这是一个供企业使用的更复杂的库,此处提供实时演示:http :
//www.fusioncharts.com/explore/real-time-charts

编辑
我也开始使用Rickshaw绘制实时图形,它易于使用且非常可定制:
http :
//code.shutterstock.com/rickshaw/

这个线程现在可能已经非常旧了。但是想与看到此主题的人分享这些结果。进行比较。Flotr2,ChartJS,highcharts异步进行。Flotr2似乎是最快的。通过每50毫秒传递一个新数据点(总共1000个数据点)进行测试。尽管Flotr2似乎定期重绘图表,但对我来说却是最快的。

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

您从服务器获取数据,更新以前可用的数据集,然后可能使用免费提供的库之一绘制图形(例如:http ://www.rgraph.net

您可能需要考虑的事情:如果图表表示一个状态,请仅使用xhr获取新数据,在客户端上更新数据并绘制。

您也可以尝试一下Meteor Charts,它超级快(html5 canvas),有很多教程,而且文档齐全。实时更新效果很好。您只需更新模型并运行chart.draw()即可重新渲染场景图。这是一个演示:

http://meteorcharts.com/demo

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

取而代之的是 在服务器端提供了石墨API http://graphite-api.readthedocs.org/en/latest/,以及使用该API的客户端插件的数量。但是实际上它们是非常有限的,缺少我们喜欢的高级功能:数据滚动器,范围图,相上的axeX分段等。

似乎“显示我的到达图表”和“实时图表”任务之间存在根本差异。

本文地址:http://jquery.askforanswer.com/daiyouhtml5dezhexiantushangdeshishishujuhuitu.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!