风言枫语  
ext4.0绘制chart（柱状图，条形图）
 

Jsp代码
  1.  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  9. <head>  
  10.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  11.   <link rel="stylesheet" type="text/css" href="<%=basePath%>ext-4.0/resources/css/ext-all.css" />  
  12.   <script type="text/javascript" src="<%=basePath%>ext-4.0/bootstrap.js"></script>  
  13.   <script type="text/javascript" src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  14.   <link href="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />   
  15.   <link href="<%=basePath %>css/core.css" rel="stylesheet" type="text/css" media="screen"/>  
  16.   <link href="<%=basePath %>css/style.css" rel="stylesheet" type="text/css" media="screen"/>  
  17.   <script src="<%=basePath%>js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>   
  18. <script type="text/javascript">  
  19.     Ext.onReady(function(){  
  20.         Ext.create('Ext.panel.Panel', {  
  21.             title : '3天内特大重大故障饼状图',  
  22.             width : 500,  
  23.             height : 500,  
  24.             renderTo: 'div1',  
  25.             layout : 'card',  
  26.             items : [{  
  27.                 xtype : 'chart',  
  28.                 store :  {  
  29.                     fields: ['platName','ratio','level','troubleLevel'],  
  30.                     proxy: {  
  31.                         type: 'ajax',  
  32.                         url : '<%=basePath %>reports/3dayAgo.action',  
  33.                         reader: {  
  34.                             type: 'json',//Ext.data.reader.Json解析器  
  35.                             root: 'reportLs'  
  36.                         }  
  37.                     },  
  38.                     autoLoad: true  
  39.                 },  
  40.                 animate : true,//是否启用动画效果  
  41.                 legend : {  
  42.                     position : 'bottom' //图例位置  
  43.                 },  
  44.                 shadow : true,  
  45.                 series : [{  
  46.                     type : 'pie',//图表序列类型  
  47.                     field : 'ratio',//对应饼状图角度的字段名  
  48.                     showInLegend : true,//是否显示在图例当中  
  49.                 //  colorSet : ['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色配置  
  50.                     donut : 20,//麦圈图中空部分半径  
  51.                     label : {  
  52.                         field : 'platName',//标签字段名  
  53.                         contrast : true,  
  54.                         color : '#FFFF00',  
  55.                         renderer : function(v){//自定义标签渲染函数  
  56.                             return "["+v+"]";  
  57.                         },  
  58.                         display : 'middle',//标签显现方式  
  59.                         font : '18px "Lucida Grande"'//字体  
  60.                     },  
  61.                     highlight : {  
  62.                         segment : {  
  63.                             margin: 10 //空白区域宽度  
  64.                         }  
  65.                     },  
  66.                     tips : {  
  67.                         trackMouse : true, //是否启用鼠标跟踪  
  68.                         width : 50,  
  69.                         height : 28,  
  70.                         renderer : function(storeItem) {//自定义渲染函数  
  71.                             var title =  storeItem.get('ratio') + '%';  
  72.                             this.setTitle(title);  
  73.                         }  
  74.                     }  
  75.                 }]  
  76.             }]  
  77.         });  
  78.           
  79.         var dataStore = new Ext.data.JsonStore({  
  80.             fields:['ageRange', 'proportion', 'growing'],  
  81.             data: [  
  82.                 {ageRange :'小于30岁', proportion : 10, growing : 35},  
  83.                 {ageRange :'30-40岁', proportion : 40, growing : 30},  
  84.                 {ageRange :'40-50岁', proportion : 30,growing : 30},  
  85.                 {ageRange :'50岁以上', proportion : 20, growing : 30}  
  86.             ]  
  87.         });  
  88.         Ext.create('Ext.panel.Panel', {  
  89.             title : '3天内特大重大故障条形图',  
  90.             width: 500,  
  91.             height: 500,  
  92.             renderTo: 'div2',  
  93.             layout: 'card',  
  94.             items : [{  
  95.                 xtype : 'chart',  
  96.                 store : {  
  97.                     fields: ['troubleName','size'],  
  98.                     proxy: {  
  99.                         type: 'ajax',  
  100.                         url : '<%=basePath %>reports/3dayAgo2.action',  
  101.                         reader: {  
  102.                             type: 'json',//Ext.data.reader.Json解析器  
  103.                             root: 'repBeans'  
  104.                         }  
  105.                     },  
  106.                     autoLoad: true  
  107.                 },  
  108.                 axes: [{  
  109.                     type: 'Numeric',  
  110.                     position: 'left',  
  111.                     minimum : 0,//数轴最小值  
  112.                     maximum : 5,//数轴最大值  
  113.                     //fields: ['size','size'],//同时展示2个数据  
  114.                     title: '故障次数'  
  115.                 }, {  
  116.                     type: 'Category',  
  117.                     position: 'bottom',  
  118.                     fields: ['troubleName'],  
  119.                     title: '平台级别'  
  120.                 }],  
  121.                 legend : {  
  122.                     position : 'bottom' //图例位置  
  123.                 },  
  124.                 series : [{  
  125.                     type: 'column',  
  126.                     axis: 'left',  
  127.                     xField: ['troubleName'],//x轴字段  
  128.                     yField: ['size'],//y轴字段  
  129.                     title : ['3天内故障发生次数'],//配置图例字段说明  
  130.                     label : {  
  131.                         field : ['size'],//标签字段名  
  132.                         display : 'outside',//标签显现方式  
  133.                         font : '12px "Lucida Grande"',//字体  
  134.                         renderer : function(v){//自定义标签渲染函数  
  135.                             return v + '次';  
  136.                         }  
  137.                     }  
  138.                 }]  
  139.             }]  
  140.         });  
  141.     });  
  142. </script>  
  143. </head>  
  144. <body>   
  145.     <div style="float: left;padding-left: 10px" id="div1"></div>  
  146.     <div style="float: right;padding-right: 10px" id="div2"></div>  
  147. </body>  
  148. </html>  
  149.   
  150. <script type="text/javascript">  
  151.               $(function(){  
  152.                  //     alert($(document).height());  
  153.                       h = $(document).height() - 64;  
  154.                         
  155.                       $("#form").css("height",h);  
  156.               });  
  157.      </script> 

 

posted on 2013-08-17 22:48  风言枫语  阅读(807)  评论(0)  编辑  收藏  举报
 
Copyright © 2024 风言枫语
Powered by .NET 8.0 on Kubernetes
博客园