Ext JS4学习课程+笔记（八）Ext.chart.Chart

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等常用属性。

查看更多 下一篇