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.});