在几天前公司要我找几套统计报表的替换 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"}]}
上面就是我的成果 , (*^__^*) 嘻嘻……
上面代码还没有考虑到时间的问题。