当前位置: 代码迷 >> JavaScript >> Ext JS4学习课程+笔记(八)Ext.chart.Chart
  详细解决方案

Ext JS4学习课程+笔记(八)Ext.chart.Chart

热度:236   发布时间:2012-06-20 20:37:21.0
Ext JS4学习教程+笔记(八)Ext.chart.Chart
Ext JS的图表功能,其类名为Ext.chart.Chart

示例代码如下:
function chartTest(){
     var store1 = Ext.create('Ext.data.Store',{
                                   fields:['name','age'],
                                   proxy:{
                                        type:'ajax',
                                        url:'data.txt',
                                        reader:{
                                             type:'json',
                                             root:'items3'
                                        }
                                   }
     });    

     store1.load(function(records, operation, success) {    
          Ext.create('Ext.chart.Chart',{
                              renderTo:Ext.getBody(),
                              width:500,
                              height:300,
                              animate:true,
                              store:store1,
                              axes:[
                                   {
                                        type:"Numeric",
                                        position:'left',
                                        fields:['age'],
                                        title:'年龄',
                                        grid:true,
                                        minimum: 0
                                   },
                                   {
                                        type:'Category',
                                        position:'bottom',
                                        fields:['age'],
                                        title:'姓名'
                                   }
                              ],
                              series:[
                                   {
                                        type:'line',
                                        xField:'name',
                                        yField:'age',
                                        axis:'left',
                       markerConfig: {
                          type: 'cross',
                          size: 4,
                          radius: 4,
                          'stroke-width': 0
                      }                                  
                                   }
                              ]
          });
         
     });

}
数据文件data.txt如下:
{items3:
     [    {name:'t1',age:31},
          {name:'t2',age:14},
          {name:'t3',age:12},
          {name:'t4',age:11},
          {name:'t5',age:13},
          {name:'t6',age:14},
          {name:'t7',age:10},
          {name:'t8',age:8},
          {name:'t9',age:6},
          {name:'t10',age:10},
          {name:'t11',age:8},
          {name:'t12',age:12},
          {name:'t13',age:5}    ]
}

说明:
1,Chart的关键属性仍是store,使用静态读入或ajax读入。

Chart的axes属性和series属性分别指定坐标轴,以及曲线。

2,axes属性的坐标轴是一个数组,一般指定两个,每个坐标轴有type, position, fields和title等属性需要设置,
分别表示类型,位置,对应store的字段、标题。

坐标轴的类型常用的有Numeric和Category两种,对于LineChart就分别作y轴和x轴。

3,series属性的曲线,可以有多条。每一条有type, xField, yField等常用属性。

  相关解决方案