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+"/";
%>

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" xml:lang="en">

  "Content-Type" content="text/html; charset=UTF-8">
  "stylesheet" type="text/css" href="<%=basePath%>ext-4.0/resources/css/ext-all.css" />
  "text/javascript" src="<%=basePath%>ext-4.0/bootstrap.js">
  "text/javascript" src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js">
  "<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
  "<%=basePath %>css/core.css" rel="stylesheet" type="text/css" media="screen"/>
  "<%=basePath %>css/style.css" rel="stylesheet" type="text/css" media="screen"/>
  "<%=basePath%>js/jquery/jquery-1.3.2.min.js" type="text/javascript">
"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 + '次';
                        }
                    }
                }]
            }]
        });
    });



    "float: left;padding-left: 10px" id="div1">

  

    "float: right;padding-right: 10px" id="div2">

  

  

  

  

"text/javascript">  

              $(function(){  

                 //     alert($(document).height());  

                      h = $(document).height() - 64;  

                        

                      $("#form").css("height",h);  

              });