• 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.              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> 
  • 相关阅读:
    BurpSuite抓包问题
    如何共享磁盘文件呢？
    SQL Server:主键与外键设置与相关理解
    家丑不可外扬，这三种家丑，烂在肚子里也别说
    将Excel的数据导入SqlServer的表中
    我的人生感悟
    与人关系再好，也不要透露自己这3个秘密，对你没好处！
    count(1)、count(*)与count(列名)的执行区别
    远程桌面链接怎么共享本地磁盘
    IIs安装配置教程
  • 原文地址：https://www.cnblogs.com/keanuyaoo/p/3265368.html
Copyright © 2020-2023  润新知