功能介绍：
利用拓扑图实现：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. linux负载均衡与性能监控

    平均负载是单位时间内, 系统处于可运行状态和不可中断状态的平均进程数( 平均活跃进程数 ) 可运行状体好理解, 就是进程正在运行状态Running和可运行状态Runnable... 这里需要注意的是 ...

  2. Nginx+certbot 实现泛域名的https证书

    yum -y install git git clone  https://github.com/certbot/certbot cd certbot ./certbot-auto certonly ...

  3. MYSQL 面试常见问题汇总

    转自: https://blog.csdn.net/u011010851/article/details/80074550 Q1:主键,外键,超键,候选键:主键    对表中数据进行唯一标识的数据列的 ...

  4. class __init__()

    python 先定义函数才能调用 类是客观对象在人脑中的主观映射,生产对象的模板,类相当于盖房的图纸,生产工具的模具 模板 类:属性.方法 __init__() 这个方法一般用于初始化一个类但是 当实 ...

  5. mfix的Negative gas density报错解决

    错误很难定位,因为编译正常,而是运行过程中会告知出现Negative gas density,并且不收敛,没有其他错误信息.最后通过一步步定位发现是由于 IC_EP_g(1) < EP_star ...

  6. HDU6393(LCA + RMQ + 树状数组) n边图，两点最短距离 ， 修改边权

    这道题的进阶版本 进阶版本 题意: 一个n个点,n条边的图,2中操作,1是将某条边的权值更改,2是询问两点的最短距离. 题解: 由于n个点,n条边,所以是树加一个环,将环上的边随意取出一条,就是1颗树 ...

  7. CodeChef - NWAYS 组合数 朱世杰恒等式

    这道题目数据有坑,白浪费一个小时! 题意:求\(\sum_{i=1}^n\sum_{j=1}^n{|i-j|+k \choose k}\) 知识点: 朱世杰恒等式,\(\sum_{i=r}^n{i \ ...

  8. python (2) 之 pyc

    最近在编写Python脚本过程中遇到一个问题比较奇怪:Python脚本正常的,但执行报错"AttributeError: 'module' object has no attribute ' ...

  9. 【总结】kali(amd64)中安装nessus

    下载nessus: http://www.tenable.com/products/nessus/select-your-operating-system 注册nessus家庭版 http://www ...

  10. List<Type> 随机排序

    public List<T> GetRandomList<T>(List<T> inputList){ //Copy to a array T[] copyArra ...