折线图(Ext.chart.series.Line)
创建一个线路图,一般表示***的增长趋势。
说到图标,首先想到就是数据源store,你可以写伪代码,也可以通过url来动态获取(包括分页)。
下面看我写的一段代码:
伪代码:
Ext.define('WeatherPoint', {
extend: 'Ext.data.Model',
fields: ['temperature', 'date']
});
var store = Ext.create("Ext.data.Store",{
model: 'WeatherPoint',
data:[
{temperature:23,date:'1990-10-23'},
{temperature:28,date:'1998-09-12'},
{temperature:16,date:'2010-03-24'},
{temperature:27,date:'2012-10-19'},
{temperature:33,date:'2012-10-29'}
]
});
首先需要创建一个model模型来存放每一条数据,然后再store引用该模型。
注意:
此处使用Ext.define的方式来创建模型,我们还可以通过Ext.create()、new Ext.data.Model()的方式来创建对象,不过Ext4官方建议我们使用Ext.create()的方式,而大多数人习惯于Ext4之前
通过new 的方式来创建,两种方法都可以。根据个人习惯。
通过url来动态获取:(此处数据字段不对,只做简单例子讲解)
Ext.define('Adv', { //创建model对象容器
extend: 'Ext.data.Model',
fields:['guid','explain','content','date','status']
});
var store = Ext.create('Ext.data.Store', {
model: 'Adv', //使用model对象,表示store里面放的都是一个个Adv
proxy: { //代理,通过url获得数据
type: 'ajax', //声明请求类型,ajax请求
url: '${pageContext.request.contextPath}/ma/op/manageEntPortal/RBSJson',
reader: { //数据读写器
type: 'json' //表示传过来的是json数据
},
simpleSortMode: true
},
autoLoad: true //注意:此处一定要加,表示自动加载
});
好了,数据源说完就到了,我们最重要的图了:
var chartLine = Ext.create("Ext.chart.Chart",{
title:'折线图',
id:'line',
width: 400,
height: 300,
legend:{
position:'right'
},
store:store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['temperature'],
title: 'Number of Hits',
minimum: 0,
//one minor tick between two major ticks
minorTickSteps: 1
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
xField: 'date',
yField: 'temperature'
}],
renderTo :Ext.getBody()
});