extjs--创建图表.docVIP

extjs中使用FusionChart举例 (2010-10-10 13:07:11) 转载▼ 标签： 图表 fusionchart 杂谈 分类： 一 前言： ? ? 在项目实施中，设计统计部分经常会使用图表进行显示，在Extjs3中内置了图表控件，但实际表现无法达到3D的美观效果，通过查找FusionChart可以实现比较美观的3D或2D图表显示。 ??注：FusionChart是个商业图表，不过有免费版本使用. 官方网站：/ 二 实现方法 ??1：在Extjs中使用FusionChart需要使用到第三方插件uxChartPack（目前版本2.13，下载地址：/p/uxmedia/downloads/list），在使用FusionChart前，页面中需要引用uxmedia.js?uxflash.js?uxchart.js uxfusion.js四个文件。 ??2：代码举例: ?? ?笔者使用的是弹出式窗体显示Chart方式： ?function _Count() { var mk=new Ext.LoadMask(Ext.getBody(),{ msg:正在加载数据，请稍候！, removeMask:true//完成后移除 }); mk.show(); Ext.Ajax.request( { url:CountFileManager.asp?FileCtype=30, ?//后台返回Chart需要的数据 success:function (response) { var Result=Ext.decode(response.responseText); if(Result.flag!=0) { ; }else if(Result.flag==0) { var strXml=Result.strXML; strXml=chart caption=发布文件统计 subCaption=按发布单位统计 xAxisName=单位 yAxisName=文件数 ?rotateYAxisName=1 showValues=1 ?decimalPrecision=0 showNames=1 ?baseFontSize=12 outCnvBaseFontSiz=20 numberSuffix= 个 ?pieSliceDepth=30 formatNumberScale=0+strXml+/chart; ?//构造FusionChart需要的XML格式数据，这里面属性，可参考官方文件。 var fusionPanel=new Ext.ux.Chart.Fusion.Panel({ collapsible:false, chartCfg:{ id:chart1, params:{ flashVars:{ debugMode:0, lang:EN } } }, autoScroll:true, id:chartpanel, chartURL:charts/Column3D.swf,//定义图表显示类型，例如：直方，饼图等 dataXML:strXml, width:500, height:310 }); var Fwin=new Ext.Window( { name:Fwin, width:520, height:330, layout:fit, closeAction:close, title:统计图表显示, buttonAlign:center, resizable:true, modal:true, items:[fusionPanel], buttons:[ { text:退出, iconCls:icon_exit, handler:function(){Fwin.close();} }] }); mk.hide(); Fwin.show(); } }, failure:function (response) { mk.hide(); Ext.Msg.alert(提示,服务器请求错误,请稍后再试！); } }); } 服务器端返回字符： {success:true,flag:0,strXML:set name=动力TEAM value=1 /set name=行政人事部 value=1 /set name=研发中心 value=117 /set name=运管部 value=38 /set name=制造部 value=34 /set name=资产财务部 value=1 /} ?? ?这里面要注意：页面文件保存为utf-8格式，可消除中文乱码现象，不同FusionChart版本，在Y轴方向存在显示中文BUG，目前3.1版本可解决中文乱码问题（注意是Y轴标签进行了旋转，如上述的rotateYAxisName=1属性，当然也可r