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',
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} ]
}
[ {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等常用属性。