实时数据图

Question

我想建立一个基于网络的实时数据图表，我正在寻找不同的选项，例如：

• Html5 canvas
• 带有图形支持的JS库 作为Extjs

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

你能推荐一下吗？

Answer 1

还有SmoothieCharts更多的设计用于此用例。

Answer 2

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

我假设您实时表示图表会自动更新。如果您以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);
}

请务必查看以下演示以查看其实际效果（点击“轮询数据”按钮）：

• Flot Examples - Updating graphs with AJAX

有关Flot的更多信息：

• Flot Project Site
• Flot Examples
• Other Flot Examples

Answer 3

其他解决方案设计更加美观和可能性：

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

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

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