ExtJs 学习笔记

ExtJs Chart笔记

说明

使用ExtJs必须在页面引入如下文件：

<script type="text/javascript" src="<%=basepath %>/js/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="<%=basepath %>/js/ext-all.js"></script>

<link rel="stylesheet" href="<%=basepath %>/js/resources/css/ext-all.css" type="text/css">

另外ExtJS的Chart默认使用YUI的charts.swf文件,所以如果部署到一个没有联网的应用服务器上必须覆盖次路径。及在JS种添加如下(webApp为我项目中默认的根目录，读者可以根据自己的实际情况指明具体的swf文件位置)：

Ext.chart.Chart.CHART_URL='/webApp/js/resources/charts.swf';

本实例参考官方代码，因为在实际使用中感觉到有些地方没有满足我的需求，于是多方查找资料完善。希望能够让读者少走弯路。

实例预览

主要代码

首先看下我们存储数据的Store，为了简单起见Store使用数组指定。

 var store = new Ext.data.JsonStore({

        fields:['name', 'visits', 'views'],

        data: [

            {name:'Jul 07', visits: 245000, views: 300000},

            {name:'Aug 07', visits: 240000, views: 350000},

            {name:'Sep 07', visits: 355000, views: 400000},

            {name:'Oct 07', visits: 375000, views: 420000},

            {name:'Nov 07', visits: 490000, views: 550000},

            {name:'Dec 07', visits: 495000, views: 580000},

            {name:'Jan 08', visits: 520000, views: 600000},

            {name:'Feb 08', visits: 620000, views: 750000}

        ] 

});

/* 第一张图*/

new Ext.Panel({

iconCls:'chart',

title:'ExtJs visits Trend,2007/2008(Simple styling)',

width:500,

height:300,

frame:true,

layout:'fit',

renderTo:'container',

items:{

xtype:'linechart',

store:store,

xField:'name',

yField:'visits',

//格式化Y轴

yAxis:new Ext.chart.NumericAxis({

displayName:'visits',

labelRenderer:Ext.util.Format.numberRenderer('0')

}),

//提示信息

tipRenderer:function(chart,record){

return Ext.util.Format.number(record.data.visits,'0.0')+' visits in'+record.data.name;

}

}

});

/* 第二张图 */

 new Ext.Panel({

        iconCls:'chart',

        title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',

        frame:true,

        renderTo: 'container',

        width:500,

        height:300,

        iconCls:'chart',

        layout:'fit',

        items: [{

            xtype: 'columnchart',

            store: store,

            xField: 'name',

            yAxis: new Ext.chart.NumericAxis({

            //Y轴样式

             majorTicks: {color: 0x69aBc8, length: 4},

                minorTicks: {color: 0x69aBc8, length: 2},

                majorGridLines: {size: 1, color: 0xdfe8f6},

                title:'访问者'

               

            }),

            series: [{

                type:'line',

                displayName: 'Visits',

                yField: 'visits',

                style: {

                    color: 0x00ff00

                }

            },{

                type:'column',

                displayName: 'Views',

                yField: 'views',

                style: {

                    color: 0x0000ff

                }

            }],

            extraStyle:{

     legend:{

     display:'bottom',

     padding:5,

     animationEnabled:true,

     border: {

            color: 0x995566,

            size: 2

        },

     font:{

     family:'Tahoma',

     size:13

     }

     },

     yAxis:{//标题旋转方向

      titleRotation:-90

                 labelRotation:0

     }

     }

        }]

});

/*第三张*/

new Ext.Panel({

     title:'ExtJs picChart',

     width:500,

     height:400,

     renderTo:'container',

     iconCls:'chart',

     frame:true,

     items:[{

     xtype:'piechart',

     store:store,

     dataField:'visits',//重要属性

     categoryField:'name',

     /* 定义pie的颜色范围及在图面上显示百分比  */

     series:[{

     style:{

     showLabels:true,

     colors:[0x953030, 0xFF8C40, 0xFFDB59, 0x8DC63F,  0xFF4FFF,0xffbbcc,

     0x953040, 0xFF8440, 0xFFD459, 0x84C63F,  0x4FFF44,0xaabbee]

     }

     }],

     extraStyle:{

    

     legend:{

     display:'bottom',

     animationEnabled:true,//动画效果，默认为true

     background:{//指定背景

     image:'/webApp/images/desktop.gif'

     },

     padding:5,

     font:{

     family:'Tahoma',

     size:13

     }

     }

     }

     }]

    });

/*第四张*/

 new Ext.Panel({

     title:'ExtJs Stackedcolumn chart',

     width:500,

     height:400,

     iconCls:'chart',

     renderTo:'container',

     id:'Stackedcolumn',

     frame:true,

     items:[{

     xtype:'stackedcolumnchart',

     store:store,

     xField:'name',

     yAxis:new Ext.chart.NumericAxis({

     stackingEnabled:true,

     labelRenderer:Ext.util.Format.usMoney

     }),

     series:[{

     yField:'visits',

     displayName:'visits'

     },{

     yField:'views',

     displayName:'Views'

     }]

     }]

   });

总结

如果数据加载很慢的话，可以定义一个loadmask，详细信息可见官方API