電信網管系統中，設備狀態信息的實時展示非常重要，通常會掛載一堆圖標來展示狀態或告警信息，圖標的信息量有限，有時需要更詳細的面板，甚至以圖表的形式展現，本文將結合最近客戶提到的需求，使用 Qunee1.6 beta版本，實現拓撲圖中設備信息的實時顯示。

Qunee 中ui 的定制非常靈活，每個圖元節點都可以掛載多個 ui 控件，支持9X9=81種相對位置，單節點上能掛載多個 ui 元素，并進行排列和布局，另外每個 ui 元素可以綁定圖元屬性，屬性變化，ui 元素會及時更新界面。

網絡設備數據流信息展示

需求分析

網絡設備，默認設備為普通節點，雙擊時展開，顯示CPU，內存，流量等信息，使用柱狀圖和不同顏色的文字來展示，再雙擊變回普通節點 這里需要定制節點，普通模式下，節點包含圖標和文字，展開模式下，節點主體變成一個圓角矩陣的面板，上面分布多個組件：圖標，文字，柱狀圖等，其中柱狀圖可以參照之前 監控圖例子中的BarUI，其他都有現成的組件可用，面板使用內置的Shape圖形，圖標依舊使用ImageUI，文字使用 LabelUI，位置分布則借助position和 anchorPosition 屬性進行設置

CPU 柱狀圖的實現

此外，還需要將 CPU 的數值與柱狀圖綁定，這里用到Q.Element#addUI(ui, bindingProperties)函數，在第二個參數中設定數據綁定，如果有多個屬性需要綁定可以使用數組，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了綁定，綁定后就可以通過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設置了

以 CPU 柱狀圖為例，左邊是文字，右邊是柱狀圖，文字向右對齊，柱狀圖左對齊

ui位置布局

原文來自：

此外，還需要將 CPU 的數值與柱狀圖綁定，這里用到Q.Element#addUI(ui, bindingProperties)函數，在第二個參數中設定數據綁定，如果有多個屬性需要綁定可以使用數組，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了綁定，綁定后就可以通過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設置了

總結

以上是生活随笔為你收集整理的基于html5游戏毕业设计数据流图,基于HTML5的网络拓扑图设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。