在几天前公司要我找几套统计报表的替换 Flex 所做的统计报表 。 在网上搜索到挺多的统计报表控件。 其中选择了 。 highcharts 的统计报表 。 有兴趣的朋友可以去看看。
经过两天终于完成了 extjs 跟 highcharts 组合 。 下面是我的成果。
开始的时候几个 form 元素是用 tableLayout 布局的 。 但在 TabPanel 中使用里 html 过多,地二 tabs 中出现了下面的现象 。就在这耽误时间了。
下面分享下我的代码 、
index.html
首页主要是加载所 js 库 和 css 的代码 。 有到了两个 button 来控制窗口的显示。
如想运行请自行下载
extjs 2.0 版本的或更高的 extjs 的库 。 本项目使用的是 2.x 版本的 。
Jquery 是Highcharts 所依赖的 基础库 。 本项目使用的是 1.4.4 版本的 。
Highcharts 当然没有它是不行的 。 本项目是用的是 2.2 版本的 。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>higcharts</title>
<!-- extjs -->
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" type="text/css" media="screen" />
<script type="text/javascript" src="../extjs/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<!-- JQuery -->
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<!-- highcharts -->
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<!-- CarCharForm -->
<script type="text/javascript" src="carChartForm.js"></script>
<script type="text/javascript" src="carChartTabPanel.js"></script>
<script type="text/javascript" src="carChartWindow.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<input type="button" value="点击加载页面" id="show-btn"/>
<input type="button" value="点击隐藏页面" id="hide-btn"/>
</body>
</html>
main.js
main.js 加载 extjs 的控件的主要入口 。
/**
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* 作者:谢广泉
* 邮箱:xiegqooo@hotmail.com
*
* 请保留文字
*
* http://extjs.com/license
*/
Ext.onReady(function() {
var win;
var button_show = Ext.get('show-btn');
var button_hide = Ext.get('hide-btn');
if (!win) {
win = new Ext.ux.CarChartWindow();
}
button_show.on('click', function() {
win.show();
});
button_hide.on('click', function() {
win.hide();
});
});
carChartWindow.js
carChartWindow.js 创 extjs的window控件。 修改了 show 方法主要目的是 渲染 Highcharts 控件/**
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* 作者:谢广泉
* 邮箱:xiegqooo@hotmail.com
*
* 请保留文字
*
* http://extjs.com/license
*/
Ext.ux.CarChartWindow= Ext.extend(Ext.Window, {
title : '曲线图',
layout : 'fit',
width:780,
height:498,
closeAction : 'hide',
plain : true,
resizable:false,
initComponent : function(){
// Highcharts 对象渲染的 层 。
this.containerid = 'container1';
// 创建 CarChartTabPanel 对象准备 并创建 渲染层
this.carCharTab = new Ext.ux.CarChartTabPanel({carcharid:this.containerid,width : 780,height : 498});
// 传参
this.items = this.carCharTab;
// 构建 window 对象
Ext.ux.CarChartWindow.superclass.initComponent.call(this);
},
afterShow : function(){
// 显示
Ext.ux.CarChartWindow.superclass.afterShow.call(this);
// Highcharts 对象 渲染到具体的 层
this.carCharTab.createChart();
}
});
carChartTabPanel.js
通过 window 控件 加载 两个 tabs 标签 。 并创建 两个 form 控件和构建 Highcharts 所要用到的 div 。
/**
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* 作者:谢广泉
* 邮箱:xiegqooo@hotmail.com
*
* 请保留文字
*
* http://extjs.com/license
*/
Ext.ux.CarChartTabPanel = Ext.extend(Ext.TabPanel, {
carcharid:'container',
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false,
initComponent : function(){
// 创建 CarChartForm 对象
// carcharid 创建的 ID
// url 重新加载 carcharid 对象
// chariotsUrl 车辆数据
this.testform = new Ext.ux.CarChartForm({carcharid:this.carcharid,url:'demo.json',chariotsUrl:'car.json'});
this.testform1 = new Ext.ux.CarChartForm({carcharid:this.carcharid+1,url:'demo.json',chariotsUrl:'car.json'});
this.items = [{
title:'速度曲线',
layout:'form',
items:this.testform
},{
title:'温度曲线',
layout:'form',
items:this.testform1
}];
Ext.ux.CarChartTabPanel.superclass.initComponent.call(this); // 创建
this.initItems();
},
createChart:function(){
// 渲染 Highcharts 对象到 carcharid 的层 。
this.testform.createChart(this.carcharid);
this.testform1.createChart(this.carcharid+1);
}
});
carChartForm.js
下面是主要的 form 表单元素 、 Highcharts 的div 和 Highcharts 配置参数。
/**
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
*
* 作者:谢广泉
* 邮箱:xiegqooo@hotmail.com
*
* 请保留文字
*
* http://extjs.com/license
*/
/**
* @class CarChartForm
* @extends Ext.FormPanel
* @constructor
* Creates a new CarCart
* @param
*/
/**
*
*
* var testform3 = new Ext.ux.CarChartForm({id:'t3',carcharid:'container3',url:'demo.json',chariotsUrl:'car.json'});
*
* testform3.render(document.body);
*
* testform3.createChart('container3');
*/
Ext.ux.CarChartForm = Ext.extend(Ext.FormPanel, {
/**
* @id
* carchart控件 ID
*/
id : '',
/**
* @url
* 请求统计的地址
*/
url:'',
/**
* @carcharid
* 统计渲染的ID
*/
carcharid : '',
/**
* @chariotsUrl
* 请求车辆的地址
*/
chariotsUrl:'',
/**
* @initComponent
* 加载控件
*/
initComponent : function(){
/*****
* 读取 车辆信息 。
* */
this.formStore = new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:this.chariotsUrl}),
reader:new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'id'
},
['id','value']
)
});
// 加载数据。
this.formStore.load();
// 设置元素
this.items = [{
layout:'column',
border:false,
items:[{
columnWidth: .25 ,
layout:'form',
border:false,
labelAlign:'right',
width : 200,
labelWidth:40,
items:[{xtype:'combo',
hiddenName:'chariots',
store:this.formStore,
border:false,
name:'chariots',
fieldLabel:'车辆',
mode: 'local',
emptyText:'请选择车辆...',
loadingText: '正在查询数据...',
readOnly : true,//是否只读
displayField : 'value',//显示文本
valueField : 'id',//值
editable: false,//是否允许输入
forceSelection: true,//必须选择一个选项
typeAhead:true,
forceSelection: true,
triggerAction: 'all',
selectOnFocus:true,
width:130
}]
},{
columnWidth: .25 ,
layout:'form',
width : 200,
labelWidth:80,
border:false,
labelAlign:'right',
items:[{
xtype:'datefield',
name:'begindate',
border:false,
format:'Y-m-d',
fieldLabel:'开始时间',
}]
},{
columnWidth: .25 ,
layout:'form',
width : 200,
labelWidth:80,
border:false,
labelAlign:'right',
items:[{
xtype:'datefield',
name:'enddate',
border:false,
format:'Y-m-d',
fieldLabel:'截止时间',
}]
},{
columnWidth: .25 ,
layout:'form',
border:false,
scope:this,
items:[{
xtype:'button',
border:false,
text:'查询',
scope:this,
handler:function(){
// 获取 combox 、datatime 的值
var _params_ = this.getForm().getValues(false);
alert(_params_.enddate);
// 获得统计 对象
var _op_ = this.getOptions(this.carcharid);
// 获得统计 对象的 数据
var _series_ = _op_.series;
// 清空 统计 对象的 数据 重新加载
_series_ = [] ;
// 创建一个统计 对象胡方法
var _createChart_ = function (obj){new Highcharts.Chart(obj);};
// 向后台发送请求
$.ajax({
type:"POST", // 提交方式
url:this.url, // 提交地址
dataType:"json", // 解释格式
data:_params_, // 请求参数
success:function(iJson){
var results = eval(iJson); // 转换成 JSON 数据
for(var i =0 ; i < results.length;i++){ // 解释和装载数据
_series_.push({name:results[i].name,data:results[i].data});
}
_op_.series = _series_; // 赋值
_createChart_(_op_); // 重新创建一个统计
},
error:function(){
Ext.Msg.alert('系统操作','网络不通畅或数据格式不对!');
}
});
}
}]
}]
},{
xtype:'panel', // 创建 Highcharts 所依赖的 div
html:'<div id="'+this.carcharid+'" style="width: 700px; height: 400px; margin: 0 auto"></div>'
}];
Ext.ux.CarChartForm.superclass.initComponent.call(this); // 创建
this.initItems();
},
createChart:function(id){ // 创建 Highcharts 对象
var obj = this.getOptions(id);
new Highcharts.Chart(obj);
},
getOptions:function(id){ // Highcharts 对象的配置
return {
chart: {
renderTo: id,
type: 'line'
},
title: {
text: '中国冷藏网',
x: -20 //center
},
subtitle: {
text: '车辆速度',
x: -20
},
xAxis: {
categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
'18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
},
yAxis: {
title: {
text: '速度'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
//enabled: false,
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'℃';
}
},
series: [{
name: '京B.1953',
data: [-57, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}],
credits:{
href:'http://www.leng56.com',
text:'中国冷藏网版权所有'
}
};
}
});
Ext.reg('CarChartForm', Ext.ux.CarChartForm);
demo.json
demo.json 存了 ,车辆统计数据 。
[{"name":"ts","data":[3,5,7]},{"name":"ts2","data":[1,2,3]}]
car.json
car 是车辆 京B.0001 和 京B.0002的车子 。{"name":"ts","totalCount":2,"data":[{"id":1,"value":"京B.0001"},{"id":2,"value":"京B.0002"}]}
上面就是我的成果 , (*^__^*) 嘻嘻……
上面代码还没有考虑到时间的问题。