实时数据图

Question

我想构建一个基于Web的实时数据图,我正在寻找不同的选项,例如:

• Html5画布
• 带有图形支持的JS库,如Extjs

实时我的意思是,客户端轮询Web服务器说每秒或使用反向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示例 - 使用AJAX更新图形

有关Flot的更多信息:

• 绘制项目现场
• 剧情示例
• 其他Flot示例

Answer 3

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

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

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

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