EXT柱形图

var column_departmentQuotaUsed=new Ext.Panel({
        iconCls:'chart',
        frame:true,
        renderTo: 'column_chart_DepartmentQuotaUsedStatic',
        width:1600,
        height:600,
        layout:'fit',

        items: {
            xtype: 'columnchart',   //图标类型，此处是柱形图 还有其他的图表类型，比如piechart饼状图
            store: storeDepartmentQuotaUsedStatic_total,   //store 存储的数据
            xField: 'season',   //X轴表示的数据
            yAxis: new Ext.chart.NumericAxis({    //不知道干么用的
                displayName: 'Visits',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record, index, series){    //鼠标over在图形上显示的
                return record.data.season + "已使用 " + Ext.util.Format.number(record.data.total, '0,0') + " 配额数,共有 " + record.data.depart_total + " 配额数"
            },
            chartStyle: {
                padding: 10,
                animationEnabled: true,  
                legend:{   //series显示在哪里  右边
                     display: "right"
                },
                font: {
                    name: 'Tahoma',
                    color: 0x444444,
                    size: 11
                },
                dataTip: {
                    padding: 5,
                    border: {
                        color: 0x99bbe8,
                        size:1
                    },
                    background: {
                        color: 0xDAE7F6,
                        alpha: .9
                    },
                    font: {
                        name: 'Tahoma',
                        color: 0x15428B,
                        size: 10,
                        bold: true
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{     //一条柱状图
                type: 'column',
                displayName: '数量',
                yField: 'total',   //该柱状图显示的数据 是total的  在store中
                style: {
                    image:'bar.gif',
                    mode: 'stretch',
                    color:0x99BBE8
                }
            },{
                type : 'column',
                displayName : '各部门总数',   
                yField : 'depart_total',   
                style : {   
                    image:'bar.gif',
                    mode: 'stretch',
                    color : '#FF3300'
                }   
            }
            ]
        }
    });

var column_departmentQuotaUsed=new Ext.Panel({
        iconCls:'chart',
        frame:true,
        renderTo: 'column_chart_DepartmentQuotaUsedStatic',
        width:1600,
        height:600,
        layout:'fit',

        items: {
            xtype: 'columnchart',   //图标类型，此处是柱形图 还有其他的图表类型，比如piechart饼状图
            store: storeDepartmentQuotaUsedStatic_total,   //store 存储的数据
            xField: 'season',   //X轴表示的数据
            yAxis: new Ext.chart.NumericAxis({    //不知道干么用的
                displayName: 'Visits',
                labelRenderer : Ext.util.Format.numberRenderer('0,0')
            }),
            tipRenderer : function(chart, record, index, series){    //鼠标over在图形上显示的
                return record.data.season + "已使用 " + Ext.util.Format.number(record.data.total, '0,0') + " 数,共有 " + record.data.depart_total + " 数"
            },
            chartStyle: {
                padding: 10,
                animationEnabled: true,  
                legend:{   //series显示在哪里  右边
                     display: "right"
                },
                font: {
                    name: 'Tahoma',
                    color: 0x444444,
                    size: 11
                },
                dataTip: {
                    padding: 5,
                    border: {
                        color: 0x99bbe8,
                        size:1
                    },
                    background: {
                        color: 0xDAE7F6,
                        alpha: .9
                    },
                    font: {
                        name: 'Tahoma',
                        color: 0x15428B,
                        size: 10,
                        bold: true
                    }
                },
                xAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xeeeeee}
                },
                yAxis: {
                    color: 0x69aBc8,
                    majorTicks: {color: 0x69aBc8, length: 4},
                    minorTicks: {color: 0x69aBc8, length: 2},
                    majorGridLines: {size: 1, color: 0xdfe8f6}
                }
            },
            series: [{     //一条柱状图
                type: 'column',
                displayName: '需求配额',
                yField: 'total',   //该柱状图显示的数据 是total的  在store中
                style: {
                    image:'bar.gif',
                    mode: 'stretch',
                    color:0x99BBE8
                }
            },{
                type : 'column',
                displayName : '各部门总配额数',   
                yField : 'depart_total',   
                style : {   
                    image:'bar.gif',
                    mode: 'stretch',
                    color : '#FF3300'
                }   
            }
            ]
        }
    });

 

 

var storeDepartmentQuotaUsedStatic_total = new Ext.data.JsonStore({
        fields: ['season', 'depart_total','total'],    //域
		url:"show_quota_pie_dao.asp?chart_type=DepartmentQuotaUsedStatic_total",//url取数据
		autoLoad: true,   //自动加载
		root:"dataList"   //根，就是从url中取出数据的开头的部分
    });
json  store 例如：
{'dataList':[ { 'season':'A部', 'depart_total':'8', 'total':'4' }, { 'season':'B部', 'depart_total':'6', 'total':'1' }, { 'season':'C部', 'depart_total':'7', 'total':'5' }, { 'season':'D部', 'depart_total':'8', 'total':'2' }, { 'season':'E部', 'depart_total':'12', 'total':'9' }, { 'season':'F部', 'depart_total':'8', 'total':'6' }, { 'season':'G部', 'depart_total':'10', 'total':'23.5' }, { 'season':'H部', 'depart_total':'5', 'total':'2' }, { 'season':'I部', 'depart_total':'15', 'total':'2.5' }, { 'season':'总数量', 'depart_total':'62', 'total':'62'} ]} 

 

 

评论

1 楼 adfgyfhyl 2012-07-04