【ExtJs】折线图

浏览数：50 / 时间：2015年06月09日

ExtJs在ExtJs4之后，包含4则推出了图表功能，虽然图表功能可以通过其余JQuery插件实现，例如《【jQuery】兼容IE6的图表插件Highcharts》（点击打开链接），但是这个ExtJs的图表插件也很优秀，至少一些常见的图表也是不虚的。

一、基本目标

画出如下的折现图：

技术分享

二、制作过程

首先，ExtJs绘制图表的项目，与《【ExtJs】与后台数据库交互的带分页表格组件grid的查询》（点击打开链接）同样，要先定义一个数据实体。

	 	Ext.define('graphData',{
			extend:'Ext.data.Model',
			fields:[
				{name:'graphName',type:'string'},
				{name:'graphData',type:'int'}
			]
		});

然后，声明这个数据实体中的数据：

		var graphDataStore=Ext.create('Ext.data.Store',{
			model:'graphData',
			data:[
				{graphName:"1月",graphData:700},
				{graphName:"2月",graphData:800},
				{graphName:"3月",graphData:600},
				{graphName:"4月",graphData:500}	
			]
		});

如果数据由后端页面提供则这样写：

		var graphDataStore=Ext.create('Ext.data.Store',{
			model:'graphData',
			proxy:{
				type:'ajax',
				url:'showData.php',//提供Json字符串的页面
				reader:{
					type:'json',
					root:'data',
				}
			},
			autoLoad:true
		});

其中showData.php这个页面打印出如下字符串即可：

{  
'success':true,
'data':[  
{graphName:"1月",graphData:700},
{graphName:"2月",graphData:800},
{graphName:"3月",graphData:600},
{graphName:"4月",graphData:500}	
]  
}

最后绘制折线图即可：

		var chart = new Ext.chart.Chart({
			//以下四项必须指定。否则无法显示。
			width: 480,
			height: 320,
			store: graphDataStore,
			renderTo: Ext.getBody(),
			axes: [{//声明左轴与底轴分别是什么
				type: 'Numeric',
				position: 'left',
				fields: 'graphData'
			}, {
				type: 'Category',
				position: 'bottom',
				fields: 'graphName'
			}],
			series: [{//声明填充x与y轴的数据分别是什么
				type: 'line',
				axis: 'left',
				xField: 'graphName',
				yField: 'graphData'
			}]
		});

因此，整个Line.html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>折线图</title>
        <script type="text/javascript" src="../js/ext-all.js"></script>
        <script type="text/javascript" src="../js/bootstrap.js"></script>
        <script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script>
        <link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    </body>
</html>
<script>
    Ext.onReady(function(){
	 	Ext.define('graphData',{
			extend:'Ext.data.Model',
			fields:[
				{name:'graphName',type:'string'},
				{name:'graphData',type:'int'}
			]
		});
		var graphDataStore=Ext.create('Ext.data.Store',{
			model:'graphData',
			data:[
				{graphName:"1月",graphData:700},
				{graphName:"2月",graphData:800},
				{graphName:"3月",graphData:600},
				{graphName:"4月",graphData:500}	
			]
		});
		var chart = new Ext.chart.Chart({
			//以下四项必须指定。否则无法显示。
			width: 480,
			height: 320,
			store: graphDataStore,
			renderTo: Ext.getBody(),
			axes: [{//声明左轴与底轴分别是什么
				type: 'Numeric',
				position: 'left',
				fields: 'graphData'
			}, {
				type: 'Category',
				position: 'bottom',
				fields: 'graphName'
			}],
			series: [{//声明填充x与y轴的数据分别是什么
				type: 'line',
				axis: 'left',
				xField: 'graphName',
				yField: 'graphData'
			}]
		});
	});
</script>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【ExtJs】折线图