一 前言： ? ? 在項目實施中，設(shè)計統(tǒng)計部分經(jīng)常會使用圖表進(jìn)行顯示，在Extjs3中內(nèi)置了圖表控件，但實際表現(xiàn)無法達(dá)到3D的美觀效果，通過查找FusionChart可以實現(xiàn)比較美觀的3D或2D圖表顯示。 ?注：FusionChart是個商業(yè)圖表，不過有免費版本使用.官方網(wǎng)站：http://www.fusioncharts.com/

二 實現(xiàn)方法 ?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:'正在加載數(shù)據(jù)，請稍候！', removeMask:true//完成后移除 }); mk.show(); Ext.Ajax.request( { url:"CountFileManager.asp?FileCtype=30", //后臺返回Chart需要的數(shù)據(jù) 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='發(fā)布文件統(tǒng)計'subCaption='按發(fā)布單位統(tǒng)計' xAxisName='單位' yAxisName='文件數(shù)' rotateYAxisName='1' showValues='1' decimalPrecision='0' showNames='1' baseFontSize='12' outCnvBaseFontSiz='20'numberSuffix=' 個' pieSliceDepth='30'formatNumberScale='0'>"+strXml+"</chart>"; //構(gòu)造FusionChart需要的XML格式數(shù)據(jù)，這里面屬性，可參考官方文件。 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:'統(tǒng)計圖表顯示', 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("提示","服務(wù)器請求錯誤,請稍后再試！"); } }); }

服務(wù)器端返回字符： {success:true,flag:0,strXML:"<set name='動力TEAM' value='1' /><set name='行政人事部' value='1' /><set name='研發(fā)中心' value='117' /><set name='運管部' value='38' /><set name='制造部' value='34' /><set name='資產(chǎn)財務(wù)部' value='1' />'"}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。