实时数据图

发布于 2024-09-25 01:14:46 字数 192 浏览 0 评论 0原文

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

Html5 canvas
具有图形支持的 JS 库，例如正如 Extjs

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

你能推荐一下吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

红颜悴 2024-10-02 01:14:46

还有 SmoothieCharts 专门针对此用例而设计。

回复收藏 0 原文

把时间冻结 2024-10-02 01:14:46

您可能需要考虑使用 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 示例 - 使用 AJAX 更新图表

有关 Flot 的更多信息：

< a href="http://code.google.com/p/flot/" rel="noreferrer">Flot 项目网站
流量示例
其他流量示例

You may want to consider using Flot, an open-source plotting library based on 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:

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):