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

jackjobs

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

最近访客更多访客>>

钱小白

yzjd19900517

szjszj

suncathay

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Jsp代码

<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<linkrel="stylesheet"type="text/css"href="<%=basePath%>ext-4.0/resources/css/ext-all.css"/>
<scripttype="text/javascript"src="<%=basePath%>ext-4.0/bootstrap.js"></script>
<scripttype="text/javascript"src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
<linkhref="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css"rel="stylesheet"type="text/css"/>
<linkhref="<%=basePath%>css/core.css"rel="stylesheet"type="text/css"media="screen"/>
<linkhref="<%=basePath%>css/style.css"rel="stylesheet"type="text/css"media="screen"/>
<scriptsrc="<%=basePath%>js/jquery/jquery-1.3.2.min.js"type="text/javascript"></script>
<scripttype="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"LucidaGrande"'//字体
},
highlight:{
segment:{
margin:10//空白区域宽度
}
},
tips:{
trackMouse:true,//是否启用鼠标跟踪
width:50,
height:28,
renderer:function(storeItem){//自定义渲染函数
vartitle=storeItem.get('ratio')+'%';
this.setTitle(title);
}
}
}]
}]
});
vardataStore=newExt.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"LucidaGrande"',//字体
renderer:function(v){//自定义标签渲染函数
returnv+'次';
}
}
}]
}]
});
});
</script>
</head>
<body>
<divstyle="float:left;padding-left:10px"id="div1"></div>
<divstyle="float:right;padding-right:10px"id="div2"></div>
</body>
</html>
<scripttype="text/javascript">
$(function(){
//alert($(document).height());
h=$(document).height()-64;
$("#form").css("height",h);
});
</script>