2012-11-26 384 views
1

我正在嘗試查找可以在Web瀏覽器中創建條形圖的示例或工具。我將通過Web套接字從服務器發送數據,並且在收到數據時,我希望每個欄的「高度」發生變化,以反映收到的數據。使用網絡套接字在瀏覽器中創建圖形

因此,用戶可以看到圖形隨着數據的接收而改變。

我見過很多例子,但我看不到會做到上述的一個例子。像D3這樣的東西看起來非常好,但似乎有一個陡峭的學習曲線,似乎有很多在那裏變得相當混亂。

我正在尋找簡單和快速的事情。

感謝

回答

5

你真的需要做的是找到一個簡單的圖表庫,支持某種形式的重繪或綁定數據模型和檢測到該模型的變化的方式。常見的步驟是:

  1. 與初始數據集創建圖表對象
  2. 繪製
  3. 在WebSocket連接
  4. 獲取更新
  5. 更新數據集
  6. 重繪圖表

初始圖由於一般過程非常簡單,因此庫的複雜性往往會隨之而來。

一些實例

的實時圖表例子只是顯示在實時投票和更新可以經由達網絡雜誌教程Code a real-time survey with HTML5 WebSockets找到。它使用Pusher,我爲誰工作。

還有使用DJ,Python和推進器與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

+0

感謝您的鏈接,我會好好看看他們。特別推動者。 – user94628

1

看一看XSockets.NET,存在的NuGet-套餐可供設立的WebSockets /實時服務,JavaScript API的容易上手。您還可以使用託管版本,在那裏你運行JavaScript的「唯一」,關於XSockets.NET更多信息將在http://xsockets.net

託管服務發現http://live.xsockets.net爲「JavaScript的」版本,一種JavaScript開發人員操場上http://xfiddle.net/發現

關於Graph的,在jsfiddle上有一個例子,它包含一個Wijmo圖表(bar),它實時對用戶輸入做出反應。有一個鏈接到這個例子在xfiddle.net

+0

感謝您的鏈接,我來看看。 – user94628

3

你可能想看看d3.js客戶端繪製的「活」圖表。它工作得很好,而且像live bar(或其他類型)圖表這樣的事情很容易,語法類似於JQuery。至於通過WebSocket獲取數據,各種websocket包(全面披露 - 我爲Kaazing工作,開創WebSockets)幾乎都可以做到這一點。

相關問題