功能介绍：
利用拓扑图实现：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>

搞定收工！

twaver拓扑图通道组织图（百分比使用率/水槽）效果实现的更多相关文章

  1. twaver拓扑图拖拽后保存json数据

    功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...

  2. 怎样创建TWaver 3D的轮廓选中效果

    在一般的游戏中.物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本号中,TWaver提供了轮廓线样式的选中效果. 通过例如以下代 ...

  3. 如何创建TWaver 3D的轮廓选中效果

    在一般的游戏中,物体的选中效果会是这样: TWaver 3D中,物体的默认的选中效果一般都是一个方方正正的外框.在HTML5的Mono版本中,TWaver提供了轮廓线样式的选中效果. 通过如下代码把几 ...

  4. Div高度百分比

    有时候设置高度百分比,没有效果. 原因是父元素没有设置高度. 父元素可以设置高度为具体的px.或是100%等百分比. 这样子元素再能根据百分比来设置高度. <style type="t ...

  5. Android 自定义view --圆形百分比（进度条）

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...

  6. MatCap冰冻效果Shader

    MatCap方案 使用说明 制作合适的MatCap贴图 这张图决定冰像不像,网上找.Vray渲个球.ASE或者ShaderForge连,甚至直接手绘,总之只要一张长得像下面的图 注意MatCap图只有 ...

  7. css3帮你轻松实现圆角效果，不一样的前端页面。

    在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...

  8. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  9. 使用Three.js实现神奇的3D文字悬浮效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在 Three.js Journey 课程示例中,提供了一个使用 Thre ...

随机推荐

  1. TX2 dts、dtb编译与反编译

    设备树(Device Tree)包括DTC(device tree compiler),DTS(device tree source和DTB(device tree blob). dtc编译器能够把 ...

  2. 20165224 陆艺杰 Exp5 MSF基础应用

    用自己的话解释什么是exploit,payload,encode Exploit是攻击的行为 Payload是一段植入目标机的简短的带功能的恶意代码 Encode是编码,用于更改恶意代码,编码特征码检 ...

  3. JAVA基础——重新认识String字符串

    深入剖析Java之String字符串 在程序开发中字符串无处不在,如用户登陆时输入的用户名.密码等使用的就是字符串. 在 Java 中,字符串被作为 String 类型的对象处理. String 类位 ...

  4. 记一个SpringBoot中属性注入失败的问题Consider defining a bean of type ''' in your configuration

    今天遇到的一个问题: 代码检查了好几次,都没有错误,但是启动时就会报错Consider defining a bean of type ''' in your configuration. 启动类在c ...

  5. Win10 修改 开始 菜单样式..

    因为不是平板,所以改成了这个样子 下面说步骤... 打开 菜单栏位置... 将快捷方式 拷贝到 里面 来... 快捷方式 以 #开头.是为了 让其排列在最前面.... 快捷方式有个技巧...快捷方式  ...

  6. Oracle中对XMLType的简单操作（extract、extractvalue）

    前几天一直在做Oracle对XMLType字段的操作,我还不是Oracle大拿,到网上找了很多资料,但是很多就是单一功能的介绍,不能很好的解决问题,现在在这里总结下. 1.下面先创建一个名未test. ...

  7. git平台创建项目(码云)

    一.在码云创建项目 1.新建仓库 2,项目名称等 3.创建后的界面 4.克隆远程项目到本地(项目地址和用户名密码) git clone 仓库地址 注意,如果当前目录下出现git仓库同名目录时,会克隆失 ...

  8. mutillidae之注册页面的Insert型报错注入

    http://127.0.0.1/mutillidae/index.php?page=register.php 1.注册一个用户试一试,发现页面只提示用户注册成功信息,并五其它可回显信息,果断尝试盲注 ...

  9. Web 前端 中高难度问题（希望看完之后的你可以拿到Offer^v^）

    1. 解释 event loop Javascript是单线程的,所有的同步任务都会在主线程中执行. 主线程之外,还有一个任务队列.每当一个异步任务有结果了,就往任务队列里塞一个事件. 当主线程中的任 ...

  10. rewrite 功能

    一, rewrite 地址重写与地址转发 区别: 1,地址转发后客户端浏览器地址栏中的地址时不会改变的;而地址重写的话客户端浏览器地址栏会改变为服务器确定的地址 2, 在一次地址转发过程中,只产生一次 ...