轻量高效的拓扑图组件
zh

Qunee Developer Guide

添加UI组件

外观上看,每个图元由一个主体和多个孩子组件构成,默认节点呈现为一个图标和文字,这里的图标就是节点的主体,对于连线主体则为一条路径。

挂载孩子组件

除了默认的图形元素外,使用#addUI(…)方法,可以挂载更多孩子组件,每个组件可表示特定的信息,将图元属性与孩子组件属性相关联,可实现数据的联动效果

#addUI - 添加子组件

示例

添加文本标签到节点,并将文本标签的内容和字体颜色与节点用户属性相绑定,通过修改节点属性来改变文本的内容和颜色

var nodeWithLabels = graph.createNode("Node with Labels", 0, -110);
var label2 = new Q.LabelUI();
label2.position = Q.Position.CENTER_TOP;
label2.anchorPosition = Q.Position.CENTER_BOTTOM;
label2.border = 1;
label2.padding = new Q.Insets(2, 5);
label2.showPointer = true;
label2.offsetY = -10;
label2.backgroundColor = Colors.yellow;
label2.fontSize = 16;
label2.fontStyle = "italic 100";
nodeWithLabels.addUI(label2, [{
     property : "label2",
     propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
     bindingProperty : "data"
    }, {
     property : "label2.color",
     propertyType : Q.Consts.PROPERTY_TYPE_CLIENT,
     bindingProperty : "color"
    }]);
nodeWithLabels.set("label2", "another label");
nodeWithLabels.set("label2.color", Colors.blue);

效果

扩展孩子组件

通过扩展孩子组件可以实现更丰富的效果,比如定制一个柱状图,挂载到节点,表示CPU占有率,或者挂载告警冒泡标示节点的状态

HTML5实现监控图

在线演示:Monitoring Demo

ScreenShot 2014-06-05 at 下午4.08.53.png (image/png)
ScreenShot 2014-06-06 at 上午11.19.37.png (image/png)
ScreenShot 2014-06-06 at 上午11.27.52.png (image/png)
ScreenShot 2014-06-06 at 上午11.29.38.png (image/png)
ScreenShot 2014-06-06 at 上午11.35.41.png