目标是每隔几秒钟更新一次且不需要刷新页面的折线图（它将从服务器上更新的单独文件中获取信息）。是否有任何 JavaScript 库（JQuery 除外）可以使这变得容易？任何人都可以在网页上展示一个例子吗？
数据以固定的时间间隔更新。如果可能的话，最好只使用 CSS HTML5 和 javascript。
问问题
114308 次
14 回答
35
于 2013-07-25T21:10:05.013 回答
26
有几个图表库可以使用：gRaphael、Highcharts和其他人提到的那个。这些库非常易于使用且文档齐全（假设难度为 1）。
AFAIK，这些库不是“实时的”，因为它们没有提供动态添加新点的可能性。要添加新点，您需要重新绘制完整的图表。但我认为这不是问题，因为重绘图表很快。我用 gRaphael 做了一些尝试，我没有注意到这种方法有任何问题。如果您的更新速率为 10 秒，应该可以正常工作（但这可能取决于图表的复杂性）。
如果重绘整个图表有问题，您可能必须使用Raphael或paper.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
于 2011-06-28T08:00:29.297 回答
6
于 2011-06-28T11:49:04.333 回答
5
可能对您有帮助的几件事：
Canvas Express 是一个强大的图表库： http ://canvasxpress.org/
在这里您可以找到有关滚动您自己的基于方程的图表的教程：http: //www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
使用画布解决方案非常简单，您可以使用 ajax 检索图形的周期性数据，并在每次检索新数据时重新绘制图形。
由于它都是客户端，因此您无需刷新页面。
如果你知道你的方式 aroudn javascript 和 ajax，那么这将是一个中等难度。如果您不这样做，那么您可能不得不在 Stack Ovreflow 上发布更多问题，以帮助您解决您遇到的问题。
于 2011-06-28T07:11:18.733 回答
2
您可能还想查看基于 HTML5 Canvas 元素构建的CanvasJS 图表。它的渲染速度非常快，并且可以每 50-100 毫秒更新一次，而不会出现内存问题。
[全面披露：我是团队的一员]
于 2014-08-13T08:08:20.963 回答
2
最简单的方法可能是使用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
在本地设置也很简单
于 2016-03-16T15:18:39.097 回答
1
您从服务器获取数据，更新您以前可用的数据集，然后可能使用免费提供的库之一来绘制图形（例如：http ://www.rgraph.net ）
您可能需要考虑的事项：如果您的图表代表一种状态，则仅使用 xhr 获取新数据，在客户端更新数据并绘制。
于 2011-06-28T07:17:12.743 回答
1
http://www.rgraph.net/非常适合图形和图表。
于 2013-04-05T20:08:24.750 回答
1
这是我在ChartJS中发现的实时图表的要点：
https ://gist.github.com/arisetyo/5985848
ChartJS 看起来很容易使用并且看起来不错。
还有FusionCharts，一个更复杂的企业使用库，这里有实时演示：
http ://www.fusioncharts.com/explore/real-time-charts
编辑 我还开始使用 Rickshaw 制作实时图表，它易于使用且可定制： http ://code.shutterstock.com/rickshaw/
于 2014-02-14T21:56:16.757 回答
1
这个线程现在可能已经很老了。但是想为看到这个帖子的人分享这些结果。跑了一个比较下注。Flotr2、ChartJS、highcharts 异步。Flotr2 似乎是最快的。通过每 50 毫秒传递一个新数据点来测试这一点，总共最多 1000 个数据点。Flotr2 对我来说是最快的，尽管它似乎会定期重绘图表。
于 2015-03-16T06:45:15.107 回答
0
你也可以试试 Meteor Charts，它超级快（html5 画布），有很多教程，而且文档也很好。实时更新工作得很好。您只需更新模型并运行 chart.draw() 即可重新渲染场景图。这是一个演示：
于 2013-08-10T22:30:11.010 回答
0
从 2015 年开始添加据我所知，仍然没有面向运行时的折线图库。我的意思是图表哪些行为“每 N 秒请求新点”，“清除旧数据”，您可以设置“声明性”方式。
相反，服务器端有石墨 api http://graphite-api.readthedocs.org/en/latest/ ，以及使用它的客户端插件的数量。但实际上它们非常有限，缺少我们喜欢的高级功能：数据滚动条、范围图、axeX 相位分割等。
似乎任务“向我展示到达图表”和具有“实时图表”之间存在根本区别。
于 2015-10-27T09:07:39.890 回答