实时数据图[关闭]答案

【问题标题】：Real Time data graph [closed]实时数据图[关闭]
【发布时间】：2011-04-17 02:30:33
【问题描述】：

我想构建一个基于网络的实时数据图，我正在研究不同的选项，例如：

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

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

你能推荐一下吗？

【问题讨论】：

什么是实时？每天，每小时，每年，毫秒？图表显示什么？股票指数、小麦、龙卷风、人员位置？
它应该是可配置的，无论是客户端轮询服务器每秒还是通过反向ajax，服务器在可用时将数据推送到客户端...
你应该检查这个帖子techrepublic.com/blog/five-apps/…
至于现成的服务，我推荐plotti.co，它使用起来非常简单——它自动处理轮询和所有的东西，你甚至不需要任何 JS（免责声明：我我是 plottico 的创造者）

标签： javascript html graph javascript-framework

【解决方案1】：

还有SmoothieCharts 更适合此用例。

【讨论】：

SmoothieCharts 很棒，虽然它只显示时间序列的一个短滑动窗口。我还没有找到看起来像 SmoothieCharts 一样好的东西，但随着时间序列的增长会压缩水平轴（从而确保始终显示完整的时间序列，无论它有多大）。
我试过Smoothiecharts，它正是我们需要的动态数据实时条形图显示。哇——在 FF Chrome IE 上很容易实现和工作。

【解决方案2】：

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

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

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 的更多信息：

【讨论】：

【解决方案3】：

其他设计更漂亮和可能性的解决方案：

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

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

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

【讨论】：