`
hybxiaodao
  • 浏览: 246982 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

EXT柱形图

    博客分类:
  • 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  

相关推荐

    柱状图-ext

    根据给定的信息,我们可以分析出该段代码与柱状图数据获取及处理有关。下面将对这段代码涉及的关键知识点进行详细解析。 ### 关键知识点 #### 1. 动作方法(Action Method) 该方法被`@Action("bingCount")`注解...

    Extjs4.2 Chart柱状图

    在ExtJS 4.2中创建柱状图,首先你需要引入相关的类库,包括`Ext.chart.*`,这通常通过在页面中加载相应的CSS和JavaScript文件来实现。接下来,定义一个包含数据的Store,这个Store将提供图表的数据源。数据可以是...

    FusionCharts+ext统计图

    FusionCharts+ext实现的3D效果的柱状图,饼状图

    extjs—chart柱形图 例子

    ### ExtJS Chart 柱形图知识点解析 #### 一、ExtJS简介 ExtJS是一种用于构建现代化Web应用程序的框架,特别适用于开发丰富的客户端界面。它提供了大量的UI组件,包括表格、网格、图表等,使得开发者能够快速创建...

    ext4.0生成图形报表(柱形、折线、饼状)

    在创建柱形图时,我们通常会使用`Ext.chart.Chart`类,定义好X轴和Y轴的数据源,然后设置`series`属性来指定柱形图的样式和数据。例如: ```javascript var chart = Ext.create('Ext.chart.Chart', { renderTo: '...

    EXT安装包4.2.1-1

    4. **强大的图表库**:EXT包含一个完整的图表组件,可以生成各种统计和数据分析图表,如折线图、柱状图、饼图等。 5. **触摸支持**:EXT4.2.1优化了对触摸设备的支持,使得在平板电脑和智能手机上也能流畅操作。 6. ...

    EXT帮助文档(中文EXT3.0 API,中文EXT2.2 API)

    5. **图表组件**:EXT 3.0引入了图表组件,支持多种图表类型,如柱状图、饼图、线图等,用于数据可视化。 6. **拖放功能**:EXT提供了完善的拖放支持,允许用户轻松地实现元素间的拖放操作。 7. **国际化**:EXT库...

    ext3.*画图的例子

    本例子将关注如何使用Ext JS 3.x版本创建柱状图,包括设置固定值和动态从后台获取数据来绘制图表。 首先,我们需要理解柱状图的基本概念。柱状图是一种图形,用垂直或水平的矩形条表示数据类别和相应的数量。在Ext ...

    ext 中文源代码

    6. **Charts**:EXT的图表模块,用于创建丰富的可视化图表,如柱状图、饼图、线图等。 在提供的“ext2中文文档新春版”中,很可能是EXT2版本的相关文档,EXT2是EXT的一个早期版本,可能包含了详细的API文档、教程和...

    ext UI效果模板

    7. 图表和仪表盘:用于数据可视化,支持各种图表类型,如柱状图、饼图、线图等。 8. 动画和特效:EXT提供了丰富的动画API,可以实现平滑的界面过渡和交互反馈。 EXT 3.2.0是这个模板所基于的版本,这个版本稳定且...

    Ext图形报表

    这些图表包括折线图、柱状图、饼图、散点图、面积图等,能够满足大多数数据可视化的需要。通过这些图表,用户可以直观地理解大量复杂数据。 在实现图形报表时,首先需要了解Ext.chart.Chart组件,它是ExtJS图表的...

    ext 3.3 中文 chm

    8. 图表(Charts):EXT 3.3的图表组件,如何创建各种统计图表,如柱状图、折线图等。 9. 性能优化(Performance Optimization):提供了一些提高EXT 3.3应用程序性能的技巧和策略。 10. API参考(API Reference):...

    Ext4.1.0Doc_SUN.zip

    6. **图表和可视化**:EXT的图表组件在4.1版本中得到了增强,支持多种图表类型,如折线图、柱状图、饼图等,便于进行数据可视化。 7. **主题和皮肤**:EXT4.1提供了多种预定义的主题,如gray、silver、triton等,...

    ext3.0中文API

    Charts是EXT3.0中的一个亮点,它支持各种类型的图表,如柱状图、折线图、饼图和散点图。通过API,开发者可以自定义图表的颜色、样式、数据源和交互行为,为数据可视化提供强大的工具。 除此之外,EXT3.0还包括了...

    Ext 2.3中文文档-API

    5. **图表绘制**:EXT的图表组件(Charts)能够生成各种统计图表,如柱状图、饼图、线图等,方便数据可视化。文档中包含了图表的配置选项和使用示例。 6. **事件处理**:EXT的事件模型允许开发者通过监听和响应事件...

    Ext手册中文pdf版本

    5. **图表组件**:Ext的图表组件支持创建各种复杂的统计图表,如折线图、柱状图、饼图等,有助于数据可视化。 6. **触摸支持**:Ext Touch是针对移动设备的版本,提供了一套专为触摸屏优化的组件和API,使开发者...

    EXT ,EXT.chm,ext中文

    4. **高级图表**:EXT提供了多种图表类型,如折线图、柱状图、饼图等,可用于数据可视化。 5. **触摸支持**:EXT Touch是EXT的移动版本,专门用于开发触屏设备上的应用程序。 6. **AJAX通信**:EXT内置了AJAX功能...

    ext 3.0 中文API

    6. **Charts**:EXT 3.0 提供了图表组件,支持各种类型的图表,如柱状图、折线图、饼图等,可用于数据可视化。 7. **Ajax**:EXT内建的Ajax模块提供了一种简便的方式与服务器进行异步通信,可以处理JSON、XML等多种...

    Ext 官方的完整Demo

    5. **图表和图形**:Ext包含了一个强大的图表组件库,支持各种类型的图表,如线图、柱状图、饼图等。这些Demo将展示如何配置和使用图表,以及如何动态更新数据。 6. **可拖放功能**:Ext支持可拖放操作,允许用户在...

Global site tag (gtag.js) - Google Analytics