实时数据在html5的线形图上绘制graphics
我想创build一个每隔几秒钟更新一次的折线图，而不需要刷新页面（它将从一个单独的文件中获取更新到服务器上的信息），它们是否是任何JavaScript库（而不是JQuery）那会使这很容易？ 任何人都可以在网页上显示意思的例子吗？ 从1到10的规模会有多难？（10个难）
如果这个问题很重要的话，数据也会在固定的10秒内更新。 如果可能的话，我想坚持只是CSS3的HTML5和JavaScript。
有几个图表库可以使用： gRaphael ， Highcharts和其他人提到的图表。 这些库非常易于使用，并且有很好的文档logging（可以在难度级别上说1）。
AFAIK，这些库不是“实时的”，因为它们不能实时添加新的点。 要添加新的点，您需要重新绘制完整的图表。 但我认为这不是一个问题，因为重绘图表很快。 我已经做了一些与gRaphael的尝试，我没有注意到这种方法的任何问题。 如果你更新率是10s，那么应该可以工作（但是这可能取决于你的图表的复杂性）。
如果重新绘制完整的图表是一个问题，您可能需要自己开发一个图表，像Raphael或paper.js 。 这将比使用图表lib更难，但应该是可行的。 （比方说难度等级5）。
当你在一个固定的intervall上获取数据时，你可以使用一个常规的ajax库。 jQuery对我来说可以，但还有其他一些select。 这可能不是一个非固定的时间间隔的最佳select，在这种情况下，你可能不得不看看像socket.io这样的东西，但它也会对服务器端造成影响。
注1：Raphael，gRaphael和Highcharts不是纯粹的HTML5，而是SVG / VML，但我想这也是一个可以接受的select。
注2：看起来Highchart在插入新点时不需要重绘图表。 请参阅http://www.highcharts.com/documentation/how-to-use#live-charts
我会build议思慕雪图表 。
它使用起来非常简单，易于configuration，而且可以很好地处理实时数据。
有一个build造者，可以让你探索的选项，并生成代码 。
免责声明：我是图书馆的贡献者。
有几件事可能会帮助你：
Canvas Express是一个function强大的图表库： http : //canvasxpress.org/
在这里，您可以find一个关于滚动您自己的基于方程的图表的教程： http : //www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
使用canvas解决scheme非常简单，您可以使用ajax检索graphics的周期性数据，并在每次检索新数据时重新绘制graphics。
由于这是所有的客户端，你将不必刷新页面。
如果你用自己的方式编写javascript和ajax，那么这将是一个中等难度。 如果你不这样做，那么你可能需要在Stack Ovreflow上发布一些更多的问题，以帮助你解决卡住的部分。
Flotr2和Envision是选项。 Flotr2在我链接的doco页面上有一个实时的例子。 设想是有点难以开始，所以尝试Flotr2。
为了完成这个线程，我build议你看看：
d3.js
这是一个图书馆，可以帮助吨的JavaScript可视化。 但是学习曲线非常陡峭。
nvd3.js
一个库，可以很容易地创build一些d3.js可视化（当然有局限性）。
您可能还想看看构build在HTML5 Canvas元素之上的CanvasJS图表 。 它呈现得非常快，可以每50-100毫秒更新一次，而不会出现内存问题。
[全面披露：我是团队的一员]
最简单的方法可能是使用plotti.co – 我为此创build的微服务。 这取决于你如何获得数据，但一般的使用模式是包括一个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
在本地设置也很简单
我在ChartJS的实时图表中发现了一个要点：
https://gist.github.com/arisetyo/5985848
ChartJS看起来很简单，看起来不错。
还有FusionCharts ，这是一个更复杂的企业用库，在这里有一个实时演示：
http://www.fusioncharts.com/explore/real-time-charts
编辑我也开始使用人力车实时图，它很容易使用和漂亮的自定义： http : //code.shutterstock.com/rickshaw/
这个线程现在可能已经很老了。 但想分享这些结果的人看到这个线程。 比较一下。 Flotr2，ChartJS，高度asynchronous。 Flotr2似乎是最快的。 通过每50ms传输一个新的数据点到总共1000个数据点进行testing。 Flotr2对我来说是最快的，虽然它似乎是定期重新绘制图表。
您从服务器获取数据，更新您以前可用的数据存储，然后可能使用免费提供的库之一来绘制graphics[例如：http://www.rgraph.net/%5D
你可能要考虑的事情：如果你的图表代表一个状态，只用xhr获取新的数据，更新客户端上的数据并绘制。
您也可以尝试meteor图，它超快（HTML5canvas），有很多教程，也有很好的文档。 实时更新工作得很好。 您只需更新模型并运行chart.draw（）来重新渲染场景图。 这是一个演示：
从2015年的增加据我所知，仍然没有运行导向线图lib。 我的意思是图表哪些行为“每N秒要求新的点”，“清除旧的数据”，你可以设置“声明”的方式。
取而代之的是服务器端的石墨api http://graphite-api.readthedocs.org/en/latest/ ，以及使用它的客户端插件的数量。 但实际上它们是相当有限的，没有我们喜欢的高级function：数据滚动，范围图表，阶段的axeX分割等。
似乎任务“显示到达图表”有根本区别并且有“实时图表”。
