日期:2014-05-16 浏览次数:20447 次
这段时间研究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