twaver拓扑图通道组织图(百分比使用率/水槽)效果实现
2024-08-21 16:55:34
功能介绍:
利用拓扑图实现:64条通道,根据每条通道是否承载业务,提供百分比展示
首先上图,功能效果如图:
废话不多,直接上代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache">
<title>矩形百分比通道组织图核心图</title>
<script src="twaver.js"></script>
</head>
<body onload="init()">
</body>
<script type="text/javascript">
var box = new twaver.ElementBox();
var network = new twaver.vector.Network(box);
function init () {
var view = network.getView();
document.body.appendChild(view);
network.adjustBounds({ x: 0, y: 0, width: 800, height: 1000 });
initBox();
}
function initBox () {
var val = 0.3;
var w = 40;
var h = 40;
for( var i=0;i<64;i++ ){
var node = new twaver.Node({
id: i+1,
width: w,
height: h,
image: 'tank',
clients: {
value: Math.random(0.01*i,1),
focus: false
}
});
if ( i%4==0 || i>=4 ) {
node.setLocation(45 + (i%4)*45, 45+Math.floor(i/4)*45);
} else {
node.setLocation(45 + (i%4)*45, 45);
}
box.add(node);
}
}
twaver.Util.registerImage ('tank', {
w: 42,
h: 42,
origin:{ x:0,y:0 },
clip: [{
shape: "rect",
rect: [0,0,42,42],
r: 5
}],
v: [
{
shape: "rect",
rect: [0,0,42,42],
fill: function (data, view) {
return data.getClient('focus') ? '#6ecdfb' : '#ddd';
}
},
{
shape: 'rect',
y: function (data) {
return ( 1 - data.getClient('value') ) * 42;
},
w: 42,
h: 42,
fill: function (data, view) {
return data.getClient('focus') ? '#6ecdfb' : '#39ee3f';
}
},
{
shape: 'text',
text: function (data) {
var value = data.getClient("value");
return Math.floor(value*100) + "%" ;
},
font: '12px "Microsoft Yahei"',
fill: '#000',
translate: { x:20,y:28 },
},
{
shape: 'text',
text: function (data) {
var value = data.getId();
return 'VC4-'+value ;
},
font: '11px "Microsoft Yahei"',
fill: '#000',
translate: { x:20,y:14 },
}
],
//单击选中通道,再次单击取消选中
onClick: function (data,view) {
var select = function () { data.setClient('focus',true); };
var unselect = function () { data.setClient('focus',false); };
data.getClient('focus') == false ? select() : unselect();
}
});
</script>
</html>
搞定收工!
最新文章
- 搭建TFS 2015 Build Agent环境(三)
- 利用vs2013简单初探Python
- Windows下安装postgresql_psycopg2时出现 ";Unabled to find vcvarsall.bat"; 的解决办法
- delphi 类型转化
- iOS 中的加密方式
- 关于Eclipse中开发插件(二)
- 基于strpos()函数的判断用户浏览器方法
- xml--小结④DTD的验证问题,不要用IE检验,IE不靠谱
- 前端--关于CSS
- 关于IOCP,某些地方就是不让人彻底舒服(WSASend重叠post数据)
- NSDate详解及获取当前时间等常用操作
- WaitGroup
- sqlzoo:using group by and having
- vscode设置python3.7调试环境(已更新)
- Django框架之第三篇模板语法(重要!!!)
- 微信小程序--消息推送配置Token令牌错误校验失败如何解决
- 在windows资源管理器添加进入当前目录dos窗口的快捷菜单
- 玩转Javascript 给JS写测试
- DESTOON从CSRF到GETSHELL
- 09 jdk1.5的并发容器:CopyOnWriteArrayList(转载)