使用 Web 套接字在浏览器中创建图形

Posted 2023-02-16

【中文标题】使用 Web 套接字在浏览器中创建图形

【英文标题】：Creating graphs in browser with web sockets

【发布时间】：2012-11-26 23:11:06

【问题描述】：

我正在尝试查找可以在 Web 浏览器中创建条形图的示例或工具。我将通过网络套接字从服务器发送数据，并且在接收到数据时，我希望每个条的“高度”发生变化，以反映接收到的数据。

因此用户可以看到图表随着数据的接收而变化。

我见过很多例子，但我看不到一个能做到以上的例子。像 D3 这样的东西看起来非常好，但似乎有一个陡峭的学习曲线，而且似乎有很多它变得相当混乱。

我正在寻找简单快捷的方法。

谢谢

【参考方案1】：

您真正需要做的是找到一个简单的图表库，它支持某种形式的重绘或一种绑定数据模型并检测对该模型的更改的方法。常见的步骤是：

使用初始数据集创建图表对象 绘制初始图表 通过 WebSocket 连接获取更新 更新数据集 重绘图表

复杂性往往来自库，因为一般过程非常简单。

一些例子

可以通过Code a real-time survey with html5 WebSockets 上的.net 杂志教程找到仅实时显示投票和更新的实时图表示例。它使用Pusher，我为他工作。

这里还有一个使用 DJ、Python、Pusher 和 Twitter 流 API 的示例： http://bieber.nixonmcinnes.co.uk/

代码可以在这里找到： https://github.com/nixmc/pusher-d3-demo

在此处发布博文： http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/

最简单的例子

这里还有一个使用 Pusher 和 SmoothieCharts 的视频： http://www.youtube.com/watch?v=VLTsT30TZYw

【讨论】：

感谢您的链接，我会好好看看它们。尤其是推手。

【参考方案2】：

您可能希望查看 d3.js 以获取“实时”图表的客户端绘图。它工作得非常好，并且使用类似于 JQuery 的语法来处理实时条形（或其他类型）图表之类的事情真的很容易。至于通过 WebSocket 获取数据，各种 websocket 包（完全公开——我为 Kaazing 工作，开创了 WebSockets）几乎都可以做到这一点。

【参考方案3】：

看看 XSockets.NET，有一个 Nuget-Package 可用于设置 WebSockets/Realtime 服务，javascript API 很容易上手。您也可以使用托管版本，在其中“仅”运行 JavaScript，有关 XSockets.NET 的更多信息将在 http://xsockets.net 上找到

http://live.xsockets.net 上的“javascript”版本托管服务，http://xfiddle.net/ 上的 JavaScript 开发人员游乐场

关于 Graph，jsfiddle 上有一个示例，它包含一个 Wijmo 图表（条形图），可以实时响应用户输入。 xfiddle.net 中有指向该示例的链接

【讨论】：

谢谢你的链接，我去看看。

【参考方案4】：

对于这个老问题的新访问者，以下是当前使用 websocket 实时更改绘图的最简单和最直接的示例之一（实现使用与 python 或 perl 配对的谷歌图表）：

https://github.com/albertobeta/UberSimpleWebsockets