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

问题描述

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

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

我见过一个数字的例子，但我看不到一个会做到上述。像D3这样的东西看起来非常好，但似乎有一个陡峭的学习曲线，似乎有不少在那里它变得相当混乱。

我正在寻找的东西简单快捷。

谢谢

解决方案

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

使用初始数据集创建图表对象

绘制初始图表

通过WebSocket连接获取更新

更新数据集

重绘图表

库的复杂性往往与库中一样，因为一般过程非常简单。

一些示例

实时图表实例可实时显示投票和更新，可通过.net杂志教程。它使用我工作的。

还有一个使用DJ，Python，Pusher和Twitter流媒体API的示例：

代码可以在这里找到：

博客文章：

最简单的例子

这里推送：

I'm trying to find examples or tools that can create a bar graph in a web browser. I'll be sending the data from the server via a web socket and as the data is received I want the 'height' of each bar to change, reflecting the data received.

So the user can see the graph changing as data is received to.

I've seen a number of examples, but I can't see one that will do the above. Something like D3 looks really good but seems to have a steep learning curve and there seem to be quite a few out there it's getting quite confusing.

I'm looking for something simple and quick to do.

Thanks

解决方案

What you really need to do is find a simple charting library which supports some form of redraw or a way of binding a data model and detecting changes to that model. The common steps are:

1. Create chart object with initial set of data
2. Draw initial chart
3. Get update over WebSocket connection
4. Update data set
5. Redraw chart

The complexity tends to come in with the libraries as the general process is pretty simple.

Some examples

A realtime charting example which just displays votes and updates in realtime can be found via .net magazine tutorial on Code a real-time survey with HTML5 WebSockets. It uses Pusher, who I work for.

There's also an example that uses DJ, Python, Pusher and the Twitter streaming API here:http://bieber.nixonmcinnes.co.uk/

The code can be found here:https://github.com/nixmc/pusher-d3-demo

Blog post here:http://www.nixonmcinnes.co.uk/2012/04/20/what-can-we-learn-from-the-real-time-web-and-justin-bieber/

The simplest example

There's also a video of using Pusher with SmoothieCharts here:http://www.youtube.com/watch?v=VLTsT30TZYw

这篇关于使用Web套接字在浏览器中创建图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！