一 前言： ? ? 在項目實施中，設計統計部分經常會使用圖表進行顯示，在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.jsuxfusion.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'屬性，當然也可rotateYAxisName='0'，不進行旋轉，可保證Y軸中文正常顯示)
三、部分FusionChart屬性說明：（轉摘至其他網站,供參考！） FusionCharts參數說明 功能特性 animation ? ?? ? ?? ? ?? ? 是否動畫顯示數據，默認為 1(True) showNames ? ?? ? ?? ? ?? ? 是否顯示橫向坐標軸(x軸)標簽名稱 rotateNames ? ?? ? ?? ? ?是否旋轉顯示標簽，默認為0(False):橫向顯示 showValues ? ?? ? ?? ? ?? ?是否在圖表顯示對應的數據值，默認為1(True) yAxisMinValue ? ?? ? ?? ? ?指定縱軸(y軸)最小值，數字 yAxisMaxValue ? ?? ? ?? ? ??指定縱軸(y軸)最小值，數字 showLimits ? ?? ? ?? ? ?? ?是否顯示圖表限值(y軸最大、最小值)，默認為1(True) showColumnShadow ? ??是否顯示各條形圖間的陰影（若柱面圖在一起并列的話） showAlternateHGridColor 是否隔行顯示不同顏色 圖表標題和軸名稱 caption ? ?? ? ?? ? ?? ? 圖表主標題 subCaption ? ?? ? ?? ? ?? ? 圖表副標題 xAxisName ? ?? ? ?? ? ?? ? 橫向坐標軸(x軸)名稱 yAxisName ? ?? ? ?? ? ?? ? 縱向坐標軸(y軸)名稱 imageSave='1' ? ?? 是否保存圖片 imageSaveURL='Path/FusionChartsSave.jsp '圖片路徑 hoverCapSepChar='，'。鼠標放到柱面上時顯示的提示信息的分隔符 showhovercap='1' ? ?? ??鼠標放到柱面上時是否顯示提示信息? hoverCapBgColor=‘ffffff’提示信息背景顏色 圖表和畫布的樣式 bgColor ? ?? ? ?? ? ?? ? 圖表背景色，6位16進制顏色值 canvasBgColor ? ?? ? ?? ? ?畫布背景色，6位16進制顏色值 canvasBgAlpha ? ?? ? ?? ? ?畫布透明度，[0-100] canvasBorderColor ? ?? ? ?? 畫布邊框顏色，6位16進制顏色值 canvasBorderThickness ? ?? ? 畫布邊框厚度，[0-100] shadowAlpha ? ?? ? ?? ? ?投影透明度，[0-100] showLegend ? ?? ? ?? ? ?? ? 是否顯示系列名，默認為1(True) 字體屬性 baseFont ? ?? ? ?? ? ?? ? 圖表字體樣式 baseFontSize ? ?? ? ?? ? ?圖表字體大小 baseFontColor ? ?? ? ?? ? ?圖表字體顏色，6位16進制顏色值 outCnvBaseFont ? ?? ? ?? ? ?圖表畫布以外的字體樣式 outCnvBaseFontSize ? ?? ? ?? 圖表畫布以外的字體大小 outCnvBaseFontColor ? ?? ? 圖表畫布以外的字體顏色，6位16進制顏色值 分區線和網格 numDivLines ? ?? ? ?? ? ?畫布內部水平分區線條數，數字 divLineColor ? ?? ? ?? ? ?水平分區線顏色，6位16進制顏色值 divLineThickness ? ?? ? ?? 水平分區線厚度，[1-5] divLineAlpha ? ?? ? ?? ? ?水平分區線透明度，[0-100] showAlternateHGridColor ? ?是否在橫向網格帶交替的顏色，默認為0(False) alternateHGridColor ? ?? ? 橫向網格帶交替的顏色，6位16進制顏色值 alternateHGridAlpha ? ?? ? 橫向網格帶的透明度，[0-100] showDivLineValues ? ?? ? ?? 是否顯示Div行的值，默認？？ numVDivLines ? ?? ? ?? ? ?畫布內部垂直分區線條數，數字 vDivLineColor ? ?? ? ?? ? ?垂直分區線顏色，6位16進制顏色值 vDivLineThickness ? ?? ? ?? 垂直分區線厚度，[1-5] vDivLineAlpha ? ?? ? ?? ? ?垂直分區線透明度，[0-100] showAlternateVGridColor ? ?是否在縱向網格帶交替的顏色，默認為0(False) alternateVGridColor ? ?? ? 縱向網格帶交替的顏色，6位16進制顏色值 alternateVGridAlpha ? ?? ? 縱向網格帶的透明度，[0-100] 數字格式 numberPrefix ? ?? ? ?? ? ?增加數字前綴 numberSuffix ? ?? ? ?? ? ? 增加數字后綴? ? % 為 '%' /(噸)為‘（噸）’（Server.UrlEncode編碼） formatNumberScale ? ?? ?是否格式化數字,默認為1(True),自動的給你的數字加上K（千）或M（百萬）；若取0,則不加K或M decimalPrecision ? ?? ? ?? 指定小數位的位數， [0-10] ?? 例如：='0' 取整 divLineDecimalPrecision ? ?指定水平分區線的值小數位的位數， [0-10] limitsDecimalPrecision ? ?? ?指定y軸最大、最小值的小數位的位數，[0-10] formatNumber ? ?? ? ?? ? ?逗號來分隔數字(千位，百萬位),默認為1(True)；若取0,則不加分隔符 decimalSeparator ? ?? ? ?? 指定小數分隔符,默認為'.' thousandSeparator ? ?? ? ?? 指定千分位分隔符,默認為',' Tool- tip/Hover標題 showhovercap ? ?? ? ?? ? ?是否顯示懸停說明框，默認為1(True) hoverCapBgColor ? ?? ? ?? 懸停說明框背景色，6位16進制顏色值 hoverCapBorderColor ? ?? ? 懸停說明框邊框顏色，6位16進制顏色值 hoverCapSepChar ? ?? ? ?? 指定懸停說明框內值與值之間分隔符,默認為',' 折線圖的參數 lineThickness ? ?? ? ?? ? ?折線的厚度 anchorRadius ? ?? ? ?? ? ?折線節點半徑，數字 anchorBgAlpha ? ?? ? ?? ? ?折線節點透明度，[0-100] anchorBgColor ? ?? ? ?? ? ?折線節點填充顏色，6位16進制顏色值 anchorBorderColor ? ?? ? ?? 折線節點邊框顏色，6位16進制顏色值 Set標簽使用的參數 value ? ? ?? ? ?? ? ?? ? ? 數據值 color ? ? ?? ? ?? ? ?? ? ? 顏色 link ? ? ?? ? ?? ? ?? ? ?鏈接（本窗口打開[Url]，新窗口打開[n-Url]，調用JS函數[JavaScript:函數]） name ? ? ?? ? ?? ? ?? ? ?橫向坐標軸標簽名稱 showFCMenuItem='0' 設置右鍵顯示不顯示 1. varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId","600", " 500"); 第一個參數是SWF 文件的地址。 第二個是圖形的id。這個id 你可以隨便叫什么，但是要注意，在后面我們講到一個頁面里有 多個圖形的時候，這個id 一定要是唯一的。 第三個參數是圖形的寬。 第四個參數是圖形的高。 我們還要設置數據文件的地址。 1. myChart.setDataURL("Data.xml"); 最后，我們把圖形渲染在指定的地方。 1. myChart.render("chartdiv"); "chartdiv"就是前面的DIV 的id，這就表示把圖形render 到"chartdiv"。 現在你運行JSChart.html，你會看到同Chart.html 一樣的效果。很顯然使用JavaScript加載 圖形，更方便，更直觀。
如果你想在一個新的窗口打開頁面，只需要在連接的前面加上“n-”，就像下面的代碼一樣： 1. <graph caption='Monthly Sales Summary'subcaption='For the year 2006 ' 2. xAxisName='Month' yAxisName='Sales'numberPrefix='$'> 3. <set name='Jan' value='1 7400'link='n-DemoLinkPages/DemoLink1.html' color='AFD8F8'/> XML數據節點和常用屬性詳解 caption=‘標題‘ subcaption=‘子標題‘ clickURL=‘abc.jsp‘ 點擊整個圖表時跳轉到abc.jsp xAxisName=部門‘ numberPrefix =‘￥’ 數據前綴單位 numberSuffix =‘個’ 數據后綴單位? Decimals=‘2’ 保留兩位小數，四舍五入 forceDecimals=‘2’ 強制保留兩位小數，對于5.1轉換為5.10? yAxisName=‘完成率’? 如果使用漢字漢符需加屬性：rotateYAxisName=‘1’ showValues=‘1’ yAxisMaxValue=‘100’? 對于百分比的常用bgColor='999999,FFFFFF‘ 漸變bgColor=‘999999 ’ 單色 useRoundEdges=‘1’ 光線效果 baseFont=‘宋體‘ baseFontSize='12'? baseFontColor='333333'

總結

以上是生活随笔為你收集整理的Extjs中使用FusionChart举例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。