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

Question

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

因此,用户可以在收到数据时看到图表发生变化.

我已经看过很多例子,但我看不到会有上述例子.像D3这样的东西看起来非常好,但似乎有一个陡峭的学习曲线,似乎有很多在那里它变得非常混乱.

我正在寻找简单快捷的事情.

谢谢

Answer 1

你真正需要做的是找到一个简单的图表库,它支持某种形式的重绘或一种绑定数据模型和检测该模型变化的方式.常见的步骤是:

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