3

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

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

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

我正在寻找一些简单快捷的事情。

谢谢

4

4 回答 4

6

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

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

由于一般过程非常简单,因此库往往会带来复杂性。

一些例子

可以通过 .net 杂志教程上的使用 HTML5 WebSockets 编写实时调查来找到一个实时图表示例,它只是实时显示投票和更新。它使用我为之工作的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-c​​an-we-learn-from-the-real-time-web-and-justin-bieber/

最简单的例子

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

于 2012-11-27T12:00:14.850 回答
3

You might want to look at d3.js for the client-side drawing of the "live" chart. It works really well, and doing things like live bar (or other type) charts is really easy, with syntax similar to JQuery. As for getting the data over the WebSocket, the various websocket packages (full disclosure--I work for Kaazing, that pioneered WebSockets) can pretty much all do this.

于 2012-11-30T01:24:19.533 回答
1

看看 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 中有指向该示例的链接

于 2012-11-27T06:59:08.797 回答
1

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

https://github.com/albertobeta/UberSimpleWebsockets

于 2015-05-31T08:52:44.457 回答