電信網管系統中，裝置狀态資訊的實時展示非常重要，通常會挂載一堆圖示來展示狀态或告警資訊，圖示的資訊量有限，有時需要更詳細的面闆，甚至以圖表的形式展現，本文将結合最近客戶提到的需求，使用 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 柱狀圖為例，左邊是文字，右邊是柱狀圖，文字向右對齊，柱狀圖左對齊
