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

<%@ 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>

巴特西

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

最新文章

热门文章