javascript - 使用网络套接字在浏览器中创建图形

Question

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

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

我看过很多示例，但我看不到一个可以执行上述操作的示例。像 D3 这样的东西看起来非常好，但似乎有一个陡峭的学习曲线，而且似乎有很多东西在那里变得非常困惑。

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

谢谢

Answer 1

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

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

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

一些例子

可以通过 .net 杂志教程在 Code a real-time survey with 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-can-we-learn-from-the-real-time-web-and-justin-bieber/

最简单的例子

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