Ext chart之折线图（Ext.chart.series.Line）

折线图（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()
		});