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