日期:2014-05-16 浏览次数:20395 次
这段时间研究extjs的使用,用来做些前端显示。要给同事用,所以临时写了一个简单的生成extjs代码的php类。只提供了一些基本的设置。
?
?
<?php /* extjs的PHP类说明 * 方法调用说明:--开始-- *{ * PHP程序页: * $extjsChart=new extjsChart();//声明类,2011-10-26之前无需传递任何参数进去 * 创建图表:$extjsChart->create('传递画图用的数据数组','图表类型:line曲线,pie饼形图【目前只有这两种图表】','页面显示的ID','图表标题','图表宽度:500','图表高度:300','项目类型:chart') * create类里数据、图表类型为必填项! * Exp:$this->chart_line=$extjsChart->create($data_line,'line','chart_line',$data['tit'],'1024','450','chart'); * HTML页面 * 在js代码标签里加入该段即可。 * Ext.onReady(function(){ {%$loadextjsfile%}; var donut = true;//不明白 {%$chart_line%};//$chart_line为从php接收返回的extjs图表代码 }); *} * 方法调用说明:--结束-- * * 数据结构:--开始-- * { * PHP下的数据结构,在进行方法调用时,线json_encode转换成json数据,便于extjs处理 * fields用于生成图例 * fields下的键值表示相对应的线条,在饼形图里表示相对应的块 * fields有多少键值,则图表有多少条线或块 * data存储数据 * data[]['name']:曲线图中表示X轴的刻度 * 饼形图中表示每个块 * data[]['cost/线条一、线条二....']:曲线图中使用['线条一、线条二....']表示每条线的在当前X轴上刻度时的数据,与fields的键值对应 * 饼形图中使用cost来显示每个块的值 * $chartdata=array( array( "fields"=> array("线条一","线条二","....") ), array( "data"=> array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), array("name"=>'1','线条一'=>'646487','线条二'=>'654878'), ...... * ) * ) * } * 数据结构:--结束-- * * 编辑时间:2011-10-26 * 编辑人:谭宁宁 */ class extjsChart { public $title=''; /*public $width='500'; public $height='350'; public $div='Ext.getBody()';*/ public $layout='fit'; public $items_type='chart'; function __conststruct() { $this->loadfile=$this->loadfile(); } function loadextjsfile() { $file="Ext.require(['Ext.data.*']); Ext.require('Ext.chart.*'); Ext.require('Ext.layout.container.Fit')"; return $file; } /* * 创建图表方法 * create($data,$stype,$items_type,$title) * $data为基本数据,$stype为图表的类型,分:pie饼形图、line折线图 这两个参数必须规定 * $data有固定的数据格式 * $items_type对象类型:即使用extjs创建一个什么,默认是chart图表对象 * $title:图表名称,可要可不要 */ function create($data,$stype,$div,$title='',$width='500',$height='350',$items_type='chart') { $this->data=$data; $this->stype=$stype; $this->div=$div; $this->width=$width; $this->height=$height; $json_data=json_encode($data); $this->dataname=$this->getMicrotime(); $chart=''; $chart.="window.".$this->dataname."=Ext.create('Ext.data.JsonStore',".($json_data).");"; $chart.="var panel".time()." = Ext.create('widget.panel',{ width: ".$width.", height: ".$height.", title: '$title', renderTo: '".$div."', layout: '".$this->layout."',"; $chart.=$this->items($items_type); $chart.="})"; return $chart; } /* * 在创建好的对象里新建一个items项目 * $items_type同create()方法的$tiems_type * 默认为chart图表项目 */ function items($items_type) { $items=''; $items.="items:{ xtype: '$items_type', id: '".($this->div=='Ext.getBody()' ? 'chart_'.time() : $this->div)."', animate: true, store: ".$this->dataname.", shadow: true, legend: { position: 'right'}, insetPadding: 30,"; $items.=$this->series($this->stype); $items.="}"; return $items; } function axes($data) { $axes=''; $axes.="axes:[{ type: 'Numeric', minimum: 0, position: 'left', fields: ["; //该行获取坐标轴的字段? $t=1; foreach($data['fields'] as $k=&g