電信網管系統中，裝置狀態資訊的實時展示非常重要，通常會掛載一堆圖示來展示狀態或告警資訊，圖示的資訊量有限，有時需要更詳細的面板，甚至以圖表的形式展現，本文將結合最近客戶提到的需求，使用 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://twaver.com.cn/xinwen/581
此外，還需要將 CPU 的數值與柱狀圖繫結，這裡用到Q.Element#addUI(ui, bindingProperties)函式，在第二個引數中設定資料繫結，如果有多個屬性需要繫結可以使用陣列，下面的例子將cpuBar的 data 屬性與 node 的cpu屬性進行了繫結，繫結後就可以通過node.set("cpu", 0.45)這樣的方式對 ui 進行屬性設定了