ext4.0绘制chart（柱状图，条形图）

jackjobs

浏览: 556759 次
性别:
来自: 武汉

最近访客更多访客>>

钱小白

yzjd19900517

szjszj

suncathay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs4

 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="<%=basePath%>ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="<%=basePath%>ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <link href="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
  <link href="<%=basePath %>css/core.css" rel="stylesheet" type="text/css" media="screen"/>
  <link href="<%=basePath %>css/style.css" rel="stylesheet" type="text/css" media="screen"/>
  <script src="<%=basePath%>js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
	Ext.onReady(function(){
		Ext.create('Ext.panel.Panel', {
			title : '3天内特大重大故障饼状图',
			width : 500,
			height : 500,
			renderTo: 'div1',
			layout : 'card',
			items : [{
				xtype : 'chart',
				store :  {
			    	fields: ['platName','ratio','level','troubleLevel'],
			        proxy: {
			            type: 'ajax',
			            url : '<%=basePath %>reports/3dayAgo.action',
			            reader: {
				            type: 'json',//Ext.data.reader.Json解析器
				            root: 'reportLs'
				        }
			        },
			        autoLoad: true
			    },
				animate : true,//是否启用动画效果
				legend : {
					position : 'bottom' //图例位置
				},
				shadow : true,
				series : [{
					type : 'pie',//图表序列类型
					field : 'ratio',//对应饼状图角度的字段名
					showInLegend : true,//是否显示在图例当中
				//	colorSet : ['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色配置
					donut : 20,//麦圈图中空部分半径
					label : {
						field : 'platName',//标签字段名
						contrast : true,
						color : '#FFFF00',
						renderer : function(v){//自定义标签渲染函数
							return "["+v+"]";
						},
						display : 'middle',//标签显现方式
						font : '18px "Lucida Grande"'//字体
					},
					highlight : {
						segment : {
							margin: 10 //空白区域宽度
						}
					},
					tips : {
						trackMouse : true, //是否启用鼠标跟踪
						width : 50,
						height : 28,
						renderer : function(storeItem) {//自定义渲染函数
							var title =  storeItem.get('ratio') + '%';
							this.setTitle(title);
						}
					}
				}]
			}]
		});
		
		var dataStore = new Ext.data.JsonStore({
			fields:['ageRange', 'proportion', 'growing'],
			data: [
				{ageRange :'小于30岁', proportion : 10, growing : 35},
				{ageRange :'30-40岁', proportion : 40, growing : 30},
				{ageRange :'40-50岁', proportion : 30,growing : 30},
				{ageRange :'50岁以上', proportion : 20, growing : 30}
			]
		});
		Ext.create('Ext.panel.Panel', {
			title : '3天内特大重大故障条形图',
			width: 500,
			height: 500,
			renderTo: 'div2',
			layout: 'card',
			items : [{
				xtype : 'chart',
				store : {
			    	fields: ['troubleName','size'],
			        proxy: {
			            type: 'ajax',
			            url : '<%=basePath %>reports/3dayAgo2.action',
			            reader: {
				            type: 'json',//Ext.data.reader.Json解析器
				            root: 'repBeans'
				        }
			        },
			        autoLoad: true
			    },
				axes: [{
					type: 'Numeric',
					position: 'left',
					minimum : 0,//数轴最小值
					maximum : 5,//数轴最大值
					//fields: ['size','size'],//同时展示2个数据
					title: '故障次数'
				}, {
					type: 'Category',
					position: 'bottom',
					fields: ['troubleName'],
					title: '平台级别'
				}],
				legend : {
					position : 'bottom' //图例位置
				},
				series : [{
				    type: 'column',
					axis: 'left',
					xField: ['troubleName'],//x轴字段
					yField: ['size'],//y轴字段
					title : ['3天内故障发生次数'],//配置图例字段说明
					label : {
						field : ['size'],//标签字段名
						display : 'outside',//标签显现方式
						font : '12px "Lucida Grande"',//字体
						renderer : function(v){//自定义标签渲染函数
							return v + '次';
						}
					}
				}]
			}]
		});
	});
</script>
</head>
<body> 
	<div style="float: left;padding-left: 10px" id="div1"></div>
	<div style="float: right;padding-right: 10px" id="div2"></div>
</body>
</html>

<script type="text/javascript">
              $(function(){
                 //     alert($(document).height());
                      h = $(document).height() - 64;
                      
                      $("#form").css("height",h);
              });
     </script>