在EXT中使用统计图

先看一下效果图。

 

一 前言：    

在项目实施中，设计统计部分经常会使用图表进行显示，在Extjs3中内置了图表控件，但实际表现无法达到3D的美观效果，通过查找FusionChart可以实现比较美观的3D或2D图表显示。

  注：FusionChart是个商业图表，不过有免费版本使用. 官方网站：http://www.fusioncharts.com/

二 实现方法

  1：在Extjs中使用FusionChart需要使用到第三方插件uxChartPack（目前版本2.13，下载地址：http://code.google.com/p/uxmedia/downloads/list），在使用FusionChart前，页面中需要引用uxmedia.js uxflash.js uxchart.js uxfusion.js四个文件。

  2：代码举例:

 

我是使用桌面菜单的形式做的。其中<spring:message code="opac.fines" />对应资源中对应的中文如：  opac.fines  ： 罰款記錄 function getRecordsPanel() { var mes = '<spring:message code="opac.fines" />'; Ext.Ajax.request({ url : "<c:url value='/intro/getRecords.htm'/>", success : function(response) { var Result = Ext.decode(response.responseText); if (Result.flag != 0) { } else if (Result.flag == 0) { var strXml = Result.strXML; strXml = "<chart sformatNumberScale='1' syncAxisLimits='1' rotateValues='1' showSum='0'>" + strXml + "<set name='" + mes + "' value='1' /></chart>"; fusionPanel = new Ext.ux.Chart.Fusion.Panel({ collapsible : false, chartCfg : { id : 'chart1', params : { flashVars : { debugMode : 0, lang : 'EN' } } }, autoScroll : true, id : 'chartpanel', chartURL : '<c:url value="/fusionChart/Column3D.swf" />', // dataURL :<c:url value="/fusionChart/data.xml" /> , 使用dataURL時可直接使用xML文件 dataXML : strXml, width : 500, height : 310 }); fusionPanel.setHeight(300); win.add(fusionPanel); fusionPanel.show(); fusionPanel.doLayout(); win.doLayout(); } }, failure : function(response) { Ext.Msg.alert("eorro!"); } }); }

Json返回字符串：

{"success":true,"flag":0,"strXML":" <set name='201