功能介绍：
利用拓扑图实现：64条通道，根据每条通道是否承载业务，提供百分比展示

首先上图，功能效果如图：

废话不多，直接上代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="pragma" content="no-cache">
  5.     <title>矩形百分比通道组织图核心图</title>
  6.     <script src="twaver.js"></script>
  7. </head>
  8. <body onload="init()">
  9. </body>
  10. <script type="text/javascript">
  11.     var box = new twaver.ElementBox();
  12.     var network = new twaver.vector.Network(box);
  13.     function init () {
  14.         var view = network.getView();
  15.         document.body.appendChild(view);
  16.         network.adjustBounds({ x: 0, y: 0, width: 800, height: 1000 });
  17.         initBox();
  18.     }
  19.     function initBox () {
  20.         var val = 0.3;
  21.         var w = 40;
  22.         var h = 40;
  23.         for( var i=0;i<64;i++ ){
  24.             var node = new twaver.Node({
  25.                 id: i+1,
  26.                 width: w,
  27.                 height: h,
  28.                 image: 'tank',
  29.                 clients: {
  30.                     value: Math.random(0.01*i,1),
  31.                     focus: false
  32.                 }
  33.             });
  34.             if ( i%4==0 || i>=4 ) {
  35.                 node.setLocation(45 + (i%4)*45, 45+Math.floor(i/4)*45);
  36.             } else {
  37.                 node.setLocation(45 + (i%4)*45, 45);
  38.             }
  39.             box.add(node);
  40.         }
  41.     }
  42.     twaver.Util.registerImage ('tank', {
  43.         w: 42,
  44.         h: 42,
  45.         origin:{ x:0,y:0 },
  46.         clip: [{
  47.             shape: "rect",
  48.             rect: [0,0,42,42],
  49.             r: 5
  50.         }],
  51.         v: [
  52.             {
  53.                 shape: "rect",
  54.                 rect: [0,0,42,42],
  55.                 fill: function (data, view) {
  56.                     return data.getClient('focus') ? '#6ecdfb' : '#ddd';
  57.                 }
  58.             },
  59.             {
  60.                 shape: 'rect',
  61.                 y: function (data) {
  62.                     return ( 1 - data.getClient('value') ) * 42;
  63.                 },
  64.                 w: 42,
  65.                 h: 42,
  66.                 fill: function (data, view) {
  67.                     return data.getClient('focus') ? '#6ecdfb' : '#39ee3f';
  68.                 }
  69.             },
  70.             {
  71.                 shape: 'text',
  72.                 text: function (data) {
  73.                     var value = data.getClient("value");
  74.                     return Math.floor(value*100) + "%" ;
  75.                 },
  76.                 font: '12px "Microsoft Yahei"',
  77.                 fill: '#000',
  78.                 translate: { x:20,y:28 },
  79.             },
  80.             {
  81.                 shape: 'text',
  82.                 text: function (data) {
  83.                     var value = data.getId();
  84.                     return 'VC4-'+value ;
  85.                 },
  86.                 font: '11px "Microsoft Yahei"',
  87.                 fill: '#000',
  88.                 translate: { x:20,y:14 },
  89.             }
  90.         ],
  91.         //单击选中通道，再次单击取消选中
  92.         onClick: function (data,view) {
  93.             var select = function () { data.setClient('focus',true); };
  94.             var unselect = function () { data.setClient('focus',false); };
  95.             data.getClient('focus') == false ? select() : unselect();
  96.         }
  97.     });
  98. </script>
  99. </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. 主机和虚拟机互Ping的问题

    主机能ping通虚拟机,虚拟机能ping不通主机. 发现原来是被防火墙阻止了.打开主机防火墙禁止Ping的方式. 在ping不通的电脑上对防火墙进行如下设置:依次单击“防火墙”—“高级设置”—“入站规 ...

  2. Java getMethod类型参数

    public class DynamicInvoker { public static void main(String[] args) { // TODO Auto-generated method ...

  3. EA添加时序图

    在项目浏览器的空白处右击 http://blog.csdn.net/craftsman1970/article/details/70877530 不同于大部分面向对象或者UML的书籍,在讨论完类图/对 ...

  4. Python之freshman08 Socket

    1. Socket介绍 概念 A network socket is an endpoint of a connection across a computer network. Today, mos ...

  5. oracle数据库导入dmp文件

    最近在自己的机子上安装了oracle11g,今天把项目的测试数据库给导入进来了,方便在本地跑起来调试.下面记录一下过程: 1,导出测试数据库的文件; 这个是在公司三楼的一台机子上,用plsql中的工具 ...

  6. P4174 [NOI2006]最大获利

    传送门 把用户群和中转站都看成点 用户群权值为正,中转站权值为负 为了获得用户群的权值,我们不得不一起获得中转站负的权值 发现就是裸的最大权闭合子图 那么从用户群连边向中转站,边值INF 从 S 连向 ...

  7. hdu3068 最长回文 马拉车模板题

    题目传送门 马拉车算法模板题. 学习博客 #include<bits/stdc++.h> #define clr(a,b) memset(a,b,sizeof(a)) using name ...

  8. SPOJ - FAVDICE 简单期望

    dp[0]=0; // rep(i,1,n) dp[i]=(double)(n-i)/n*dp[i-1]+1+(double)(i)/n*dp[i]; // (n-i)/n dp[i]= n-i / ...

  9. eclipse 远程文件实时同步，eclipse远程部署插件

    [转自] http://zhwj184.iteye.com/blog/1842730 eclipse 远程文件实时同步,eclipse远程部署插件 github地址:https://github.co ...

  10. qs.parse(） 和 qs.stringfy() 之 传输数据秘籍

    qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装. 1. qs.parse()将URL解析成对象的形式 const Qs = require('qs');let url ...