Javascript 实时数据图

Real Time data graph

提问by ken

I would like to build a web-based real time data graph and i'm looking at the different options such as:

我想构建一个基于 Web 的实时数据图，我正在查看不同的选项，例如：

• Html5 canvas
• JS libraries with graph support such as Extjs

• HTML5画布
• 具有图形支持的 JS 库，例如 Extjs

By real time i mean, either the client polling the web server say every second or using reverse ajax; the server pushes data to the client when available.

实时我的意思是，客户端轮询 Web 服务器每秒说一次或使用反向 ajax；服务器在可用时将数据推送到客户端。

Can you please recommend any?

你能推荐一些吗？

采纳答案by Daniel Vassallo

You may want to consider using Flot, an open-source plotting library based on jQuery.

您可能需要考虑使用Flot，这是一个基于jQuery的开源绘图库。

I'm assuming that by real-time you mean that the graph will update automatically. The following is how your code would look like if you were to fetch and plot the data using AJAX polling at 1 second intervals:

我假设实时意味着图表会自动更新。如果您以 1 秒的间隔使用 AJAX 轮询获取和绘制数据，您的代码如下所示：

function fetchData() {
   $.ajax({
      url:      'json_fetch_new_data.php',
      method:   'GET',
      dataType: 'json',
      success:  function(series) {
         var data = [ series ];

         $.plot($('#placeholder'), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

Make sure to check out the following demo to see it in action (Click on the "Poll for Data" button):

请务必查看以下演示以查看其实际效果（单击“Poll for Data”按钮）：

• Flot Examples - Updating graphs with AJAX

• Flot 示例 - 使用 AJAX 更新图形

For further information on Flot:

有关 Flot 的更多信息：

• Flot Project Site
• Flot Examples
• Other Flot Examples

• 浮选工程现场
• 浮点示例
• 其他浮点示例

回答by scoopr

There is also SmoothieChartsthat is designed more for this use-case.

还有专为此用例设计的SmoothieCharts。

回答by Rubén Fanjul Estrada

Other solution with design more nice and possibilities:

其他具有更好设计和可能性的解决方案：

https://changelog.com/posts/rickshaw-realtime-javascript-graphing-library

https://changelog.com/posts/rickshaw-realtime-javascript-graphing-library

example: http://shutterstock.github.com/rickshaw/examples/extensions.html

示例：http: //shutterstock.github.com/rickshaw/examples/extensions.html

code: https://github.com/shutterstock/rickshaw

代码：https: //github.com/shutterstock/rickshaw