一 前言: ?
? ? 注: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方式:

? ? ? 這里面要注意:頁面文件保存為utf-8格式,可消除中文亂碼現象,不同FusionChart版本,在Y軸方向存在顯示中文BUG,目前3.1版本可解決中文亂碼問題(注意是Y軸標簽進行了旋轉,如上述的rotateYAxisName='1'屬性,當然也可rotateYAxisName='0',不進行旋轉,可保證Y軸中文正常顯示)
在項目實施中,設計統計部分經常會使用圖表進行顯示,在Extjs3中內置了圖表控件,但實際表現無法達到3D的美觀效果,通過查找FusionChart可以實現比較美觀的3D或2D圖表顯示。
二 實現方法
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' />'"}
?
三、部分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'