extjs + jquery + highcharts

来源：互联网发布：java 前沿技术 2016 编辑：程序博客网时间：2024/06/15 14:42

在几天前公司要我找几套统计报表的替换 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"}]}

上面就是我的成果， (*^__^*) 嘻嘻……

上面代码还没有考虑到时间的问题。