Javascript 使用 html5 在折线图上绘制实时数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6502827/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Real time data graphing on a line chart with html5
提问by Mehran
I want to make a line chart that updates every couple of seconds and doesn't need the page to be refreshed(it would get the info from a separate file that updates on a server), is their any JavaScript libs(other than JQuery) that will make this is easy? could anyone show mean example on a webpage? On a scale from 1 to 10 how hard would this be?(10 being hard)
我想制作一个每几秒钟更新一次并且不需要刷新页面的折线图（它会从服务器上更新的单独文件中获取信息），是它们的任何 JavaScript 库（JQuery 除外）这将使这很容易吗？任何人都可以在网页上展示卑鄙的例子吗？在 1 到 10 的范围内，这有多难？（10 表示很难）
Also the data gets updated on a fixed interval of 10s if that matters. And if possible I would like to stick to just CSS3 HTML5 and javascript.
如果重要的话，数据也会以 10 秒的固定间隔更新。如果可能的话，我想只使用 CSS3 HTML5 和 javascript。
采纳答案by luc
There are several charting libraries that can be used : gRaphael, Highchartsand the one mentioned by others. These libraries are quite easy to use and well-documented (lets say 1 on the difficulty scale).
有几个图表库可以使用：gRaphael、Highcharts和其他人提到的一个。这些库非常易于使用且文档齐全（假设难度等级为 1）。
AFAIK, these libs are not "real-time" because they don't give the possibility to add new points on the fly. To add new point, you need to redraw the full chart. But I think this is not a problem because redrawing the chart is fast. I've made some tries with gRaphael and I didn't notice any problem with this approach. If you update rate is 10s that should work ok (but it may depends on the complexity of your charts).
AFAIK，这些库不是“实时的”，因为它们无法即时添加新点。要添加新点，您需要重新绘制完整图表。但我认为这不是问题，因为重新绘制图表很快。我已经用 gRaphael 做了一些尝试，我没有注意到这种方法有任何问题。如果您的更新速率为 10 秒，那应该可以正常工作（但这可能取决于图表的复杂性）。
If redrawing the full chart is a problem, you may have to develop a chart by yourself with a vector graphics lib like Raphaelor paper.js. That will be a bit harder than using a charting lib but should be feasible. (Let say 5 on the difficulty scale).
如果重绘完整图表有问题，您可能需要使用矢量图形库（如Raphael或paper.js ）自己开发图表。这比使用图表库要困难一些，但应该是可行的。（假设难度等级为 5）。
As you are getting the data on a fixed intervall, you can use a regular ajax lib. jQuery is ok for me but there are some other choices. That may not be the best choice for a non-fixed interval and in this case you may have to look at something like socket.iobut it would have consequences on the server side too.
当您以固定的时间间隔获取数据时，您可以使用常规的 ajax 库。jQuery 对我来说还可以，但还有其他一些选择。这可能不是非固定间隔的最佳选择，在这种情况下，您可能需要查看socket.io 之类的东西，但它也会对服务器端产生影响。
Note1: Raphael, gRaphael and Highcharts are not purely HTML5 but SVG/VML but I guess this is an acceptable choice too.
注 1：Raphael、gRaphael 和 Highcharts 不是纯粹的 HTML5，而是 SVG/VML，但我想这也是一个可以接受的选择。
Note2: it seems that Highchart doesn't require to redraw the chart when inserting new points. See http://www.highcharts.com/documentation/how-to-use#live-charts
注意2：似乎Highchart在插入新点时不需要重新绘制图表。请参阅http://www.highcharts.com/documentation/how-to-use#live-charts
回答by Drew Noakes
I would suggest Smoothie Charts.
我建议使用Smoothie Charts。
It's very simple to use, easily and widely configurable, and does a great job of streaming real time data.
它使用起来非常简单，易于配置且可广泛配置，并且在流式传输实时数据方面做得很好。
There's a builder that lets you explore the options and generate code.
有一个构建器可让您探索选项并生成代码。
Disclaimer:I am a contributor to the library.
免责声明：我是图书馆的贡献者。
回答by Razor
I believe this is exactly what you're looking for:
我相信这正是您要寻找的：
http://www.highcharts.com/demo/dynamic-update
http://www.highcharts.com/demo/dynamic-update
Open source (although a license is required for commercial websites), cross device/browser, fast.
开源（尽管商业网站需要许可证），跨设备/浏览器，速度快。
回答by Variant
Several things that might help you:
可能对您有帮助的几件事：
Canvas Express is a powerful charting library : http://canvasxpress.org/
Canvas Express 是一个强大的图表库：http: //canvasxpress.org/
Here you can find a tutorial about rolling your own equation based graphs: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
在这里你可以找到一个关于滚动你自己的基于方程的图的教程：http: //www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
Using a canvas solution is very easy, You can retrieve your periodic data for the graph using ajax, and redraw the graph every time you retrieve new data.
Since it's all client side you won't have to refresh the page.
使用画布解决方案非常简单，您可以使用 ajax 检索图形的周期性数据，并在每次检索新数据时重新绘制图形。
由于它都是客户端，因此您不必刷新页面。
If you knwo your way aroudn javascript and ajax, then it's gonna be a medium difficulty. If you don't then you'll probably have to post some more questions on Stack Ovreflow to help you with the parts you get stuck with.
如果你知道你的方式 aroudn javascript 和 ajax，那么这将是一个中等难度。如果您不这样做，那么您可能需要在 Stack Ovreflow 上发布更多问题，以帮助您解决遇到的问题。
回答by Fletch
回答by Christopher Chiche
In order to complete this thread, I would suggest you to look into:
为了完成这个线程，我建议你研究：
d3.js
d3.js
This is a library that helps with tons of javascript visualizations. However the learning curve is quite steep.
这是一个有助于大量 javascript 可视化的库。然而，学习曲线非常陡峭。
nvd3.js
nvd3.js
A library that makes it easy to create some d3.js visualizations (with limitations, of course).
一个可以轻松创建一些 d3.js 可视化的库（当然有限制）。
回答by Sunil Urs
You might also want to look at CanvasJS Chartwhich is built on top of HTML5 Canvas Element. It renders really fast and can be updated every 50-100 milliseconds without getting into memory issues.
您可能还想查看建立在 HTML5 Canvas 元素之上的CanvasJS 图表。它呈现非常快，并且可以每 50-100 毫秒更新一次，而不会出现内存问题。
[Full disclosure: I am part of the team]
[完全披露：我是团队的一员]
回答by grandrew
The easiest way may be to use plotti.co- the microservice I created exactly for this. It depends on how you get the data, but general usage pattern is including an SVG image into your html like
最简单的方法可能是使用plotti.co- 我正是为此创建的微服务。这取决于您如何获取数据，但一般使用模式是将 SVG 图像包含到您的 html 中，例如
<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>
and feeding your data in a GET request to your hash (or using a (new Image(1,1)).src=...JavaScript method from same or any other page) like this:
并在 GET 请求中将您的数据提供给您的哈希（或使用(new Image(1,1)).src=...来自同一页面或任何其他页面的JavaScript 方法），如下所示：
http://plotti.co/FSktKOvATQ8H?d=1,2,3
http://plotti.co/FSktKOvATQ8H?d=1,2,3
setting it up locally is also straightforward
在本地设置也很简单
回答by JustGoscha
Here's a gist I discovered for real-time charts in ChartJS:
https://gist.github.com/arisetyo/5985848
这是我在ChartJS 中发现的实时图表要点：https: //gist.github.com/arisetyo/5985848
ChartJS looks like it's simple to use and looks nice.
ChartJS 看起来使用起来很简单，而且看起来不错。
Also there's FusionCharts, a more sophisticated library for enterprise use, with a demo of real time here:
http://www.fusioncharts.com/explore/real-time-charts
还有FusionCharts，一个更复杂的企业使用库，这里有一个实时演示：http:
//www.fusioncharts.com/explore/real-time-charts
EDITI also started using Rickshaw for real time graphs and it's easy to use and pretty customizable: http://code.shutterstock.com/rickshaw/
编辑我也开始使用人力车进行实时图表，它易于使用且非常可定制：http: //code.shutterstock.com/rickshaw/
回答by ssp
This thread is perhaps very very old now. But want to share these results for someone who see this thread. Ran a comparison betn. Flotr2, ChartJS, highcharts asynchronously. Flotr2 seems to be the quickest. Tested this by passing a new data point every 50ms upto 1000 data points totally. Flotr2 was the quickest for me though it appears to be redrawing charts regularly.
这个线程现在可能非常非常老了。但是想与看到此线程的人分享这些结果。进行了比较赌注。Flotr2、ChartJS、highcharts 异步。Flotr2 似乎是最快的。通过每 50 毫秒传递一个新数据点来测试这一点，总共最多 1000 个数据点。Flotr2 对我来说是最快的，尽管它似乎定期重绘图表。
