EXT 图

下面我们写一个饼状图，其他的看看官方例子，再结合以下方法应该很容易就能写一个自己的图表了。

 

先获取数据

01. //这是使用ajax方式获取json数据

02. statisticsStore = new Ext.data.Store({

03.     proxy: new Ext.data.HttpProxy({ url: '/ajaxpage.aspx?t=getsexstatistics' }),

04.     reader: new Ext.data.JsonReader({}, [

05.     { name: 'name' },//只要两个参数就可以了，一个名字，一个数量

06.     { name: 'count' }

07. ])

08. });

09. statisticsStore.load();//读取数据

然后实例化一个饼状图

01. var myPicChar = new Ext.chart.PieChart({

02.     store: statisticsStore,

03.     dataField: 'count',//数量

04.     categoryField: 'name',//显示名称

05.     //extra styles get applied to the chart defaults

06.     extraStyle:

07.     {

08.         legend:

09.         {

10.             display: 'bottom',//名称显示的位置，bottom为下，还有left，right。。。。

11.             //以下就是一些style

12.             width: 30,

13.             padding: 5,

14.             font:

15.             {

16.                 family: 'Tahoma',

17.                 size: 13

18.             }

19.         }

20.     }

21. });

最后显示到panel

 

01. var statisticsPanel = new Ext.Panel({

02.     //tbar: radioStatistics,这可以放一些radio，做不同的统计

03.     //bbar: [cbBeforeYearStatistics, cbAfterYearStatistics, btnSubmit],这可以放两个DateField对某一时间段统计

04.     frame: true,

05.     autoWidth: true,//自动宽

06.     height: 400,

07.     title: '统计比例',

08.     renderTo: 'statistics',//渲染到id位statistics的div中

09.     items: myPicChar//放我们的饼状图

10. });