基於HTML5的網絡拓撲圖

電信網管系統中，設備狀態信息的實時展現很是重要，一般會掛載一堆圖標來展現狀態或告警信息，圖標的信息量有限，有時須要更詳細的面板，甚至以圖表的形式展示，本文將結合最近客戶提到的需求，使用 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位置佈局

原文來自http://www.twaver.com.cn/xinwen/581
此外，還須要將 CPU 的數值與柱狀圖綁定，這裏用到Q.Element#addUI(ui, bindingProperties)函數，在第二個參數中設定數據綁定，若是有多個屬性須要綁定能夠使用數組，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了綁定，綁定後就能夠經過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設置了