其實一直以來我都在有意無意的把我平常工作中遇到並解決的問題做個記錄，放到我的網易博客中。但卻一直沒有想過如何把我使用的技術做一個系列化的經驗總結。今天就嘗試着寫一篇吧。希望我的同事以及其他需要幫助的朋友能夠有所收穫。
一.FusionCharts的分類
關於FusionCharts的基本介紹我就不在這裏浪費篇幅了，想了解的朋友自己去www.baigoogedu.com裏面找吧。我就說說FusionCharts的官方四大分類:
1.FusionCharts
2.FusionMaps
3.FusionWidgets
4.PowerCharts
每種類型我還是貼個圖吧(從左到右依次對應):
二.關於FusionCharts的FusionCharts
大家知道了FusionCharts分類以後，就明白了FusionCharts的FusionCharts吧。之前我們小組研究FusionCharts的時候，這個念法一直都覺得很繞口，現在熟悉了，就好了。其實我們在現有的項目中幾乎85%的圖形都來至於FusionCharts的FusionCharts，還有5%來至於FusionCharts的FusionWidgets，5%來自FusionCharts的PowerCharts。可能大家會問，我這個"什麼的什麼"說法是不是太羅嗦，直接說子類不就行了嗎？不知道細心的讀者發現沒有，上面的綜合加起來是95%，其實我們項目中還有的5%的圖形是來自於amcharts的amstock。關於amcharts我就不多說了，以後有機會再做個專題吧，以免跑題了。
FusionCharts的FusionCharts分類有很多種。按數據類型分類有:
1.單組數據類型圖表(Single Data Charts)
2.多組數據類型圖表(Multi-Data Charts)
按圖的展示類型分類(也是官方分類)有:
1.單系列圖表(Single Series Charts)
2.多系列圖表(Multi-Series Charts)
3.堆積式圖表(Stacked Charts)
4.組合圖表(Combination Charts)
5.分佈圖(XY Plot Charts)
6.滾動圖(Scroll Charts)
其實我們的項目中通常所說的分類就是按數據類型分類的，這個分類是我們自己在實際工作中總結出來的。而按圖形展示來分類是FusionCharts官方文檔的分類，是很標準的分類。
數據類型分類如圖(從左到右依次對應)：
圖的展示類型分類(從左到右依次對應)：
三.關於FusionCharts的FusionCharts的Attributes(屬性)
關於FusionCharts的FusionCharts中很多不同的圖、不同類型的圖其實有很多共通的屬性，當然也有一些各自特殊的屬性。下面我先來給大家介紹這些共通的屬性吧。
上圖爲FusionCharts的FusionCharts中Column2D.swf的屬性。我將拿此圖的屬性作爲例子講解，因爲此圖的屬性幾乎全部爲通用屬性。(具體是99%通用還是100%通用這個我還真沒有統計過，至少是95%通用吧)。屬性的分類就以官方的API文檔爲準吧：
1.Chart:
<1>Functional Attributes(功能屬性)
<2>Titles and Axis Names(標題和座標抽名字)
<3> Charts Cosmetics(圖表美容屬性)
<4>Divisional Lines/Grids(分區線/網格 屬性)
<5>Tool-tip(工具提示屬性)
<6>Paddings and Margins(填充和邊距屬性)
2.Data:
<1><set> element(set元素屬性)
<2>Plot Cosmetics(節點美容屬性)
3.Others:
<1>Number Formatting(數字格式化屬性)
<2>Font Properties(字體屬性)
<3>Vertical Lines(垂直線屬性)
<4>Trend Lines(趨勢線屬性)。
注:細心的讀者會發現，我上面列的屬性分類和圖片上的有點不一致，我來解釋一下：Chart的Chart Image和Data的Sample XML Data是鏈接到圖片和數據，不是屬性。Chart的Chart Objects是高級"對象組合屬性"，平時也很少使用，這裏就暫不做介紹了吧，有機會的話，以後單獨寫篇文章再給大家講解。
屬性的分類先介紹到這裏，下面我來詳細解釋每個屬性的用途，但在這之前，我得提一下屬性的數據類型。FusionCharts 的 XML標籤屬性有一下四種數據類型:
<1>Boolean - 布爾類型，只能爲1或者0。例如：<chart showNames=’1′ >
<2>Number - 數字類型，只能爲數字。例如：<chart yAxisMaxValue=’200′ >
<3>String - 字符串類型，只能爲字符串。例如： <chart caption=’My Chart’ >
<4>Hex Color Code - 十六進制顏色代碼，前邊沒有’#’.例如： <chart bgColor=’FFFFDD’ >
好了，瞭解了這麼多了。下面的就簡單了，讓我來一一介紹具體的每個屬性吧。
1.Functional Attributes(功能屬性)
animation='0/1' (設置圖形的顯示是否是動畫顯示)
palette='1-5' (5種默認的調色板風格任你選)
paletteColors='String' (手動設置調色板的顏色paletteColors='FF0000,0372AB,FF5904...')
showAboutMenuItem='0/1'(在圖形上點擊右鍵時是否顯示about鏈接)
aboutMenuItemLabel='String'(about鏈接的具體名字)
aboutMenuItemLink='String'(about鏈接的具體鏈接地址)
showLabels='0/1'(是否顯示x軸的座標值)
labelDisplay='WRAP/STAGGER/ROTATE/NONE'(x軸座標值的具體展現形式)
rotateLabels='0/1'(是否旋轉x軸的座標值)
slantLabels='0/1'(將x軸座標值旋轉爲傾斜的還是完全垂直的)
labelStep='1 or above'(x軸座標值的步長，即可以設置隔幾個柱子顯示一個值)
staggerLines='2 or above'(如果labelDisplay設置爲STAGGER,則此屬性是控制一個展示週期)
showValues='0/1'(是否在圖形上顯示每根柱子具體的值)
rotateValues='0/1'(是否旋轉圖形上顯示的柱子的值)
placeValuesInside='0/1'(圖形上柱子的值是否顯示在柱子裏面)
showYAxisValues='0/1'(是否顯示Y軸的值)
showLimits='0/1'(是否顯示極值)
showDivLineValues='0/1'(是否在divline處顯示值)
yAxisValuesStep='1 or above'(Y軸值的步長)
showShadow='0/1'(是否顯示陰影)
adjustDiv='0/1'(是否自動調整divlines)
rotateYAxisName='0/1'(是否旋轉Y軸的名字)
yAxisNameWidth='Number'(Y軸名字的寬度)
clickURL='String'(點擊的鏈接地址)
defaultAnimation='0/1'(是否使用默認動畫)
yAxisMinValue='Number'(Y軸的最小值)
yAxisMaxValue='Number'(Y軸的最大值)
setAdaptiveYMin='0/1'(自動設置Y軸的最小值)
2.Titles and Axis Names(標題和座標抽名字)
caption='String'(主標題名字)
subCaption='String'(副標題名字)
xAxisName='String'(X軸名字)
yAxisName='String'(Y軸名字)
3.Charts Cosmetics(圖表美容屬性)
bgColor='Color' (圖表的背景色)
bgAlpha='0-100'(背景色的透明度)
bgRatio='1-100'(如果背景色有兩個，該屬性設置差異的比例)
bgAngle='0-360'(轉變背景顏色的角度，設置一個傾斜度)
bgSWF='String'(用做背景的swf路徑)
bgSWFAlpha='0-100'(背景swf的透明度)
canvasBgColor='Color'(畫板背景顏色)
canvasBgAlpha='0-100'(畫板背景透明度)
canvasBgRatio='Number'(不同畫板背景色的比率)
canvasBgAngle='Number'(畫布背景色顯示角度)
canvasBorderColor='Color'(畫板邊框的顏色)
canvasBorderThickness='Number'(畫板邊框的寬度)
canvasBorderAlpha='0-100'(畫板邊框的透明度)
showBorder='0/1'(是否顯示圖表邊框)
borderColor='Color'(邊框顏色)
borderThickness='Number'(圖表邊框的粗細)
borderAlpha='0-100'(邊框透明度)
showVLineLabelBorder='0/1'(是否顯示垂直線label的寬度)
logoURL='String'(在圖表上加上logo,logo圖片的地址)
logoPosition='TL/TR/BL/BR/CC'(logo的位置)
logoAlpha='0-100'(logo的透明度)
logoScale='1-300'(控制logo放大縮小的倍數)
logoLink='String'(logo的鏈接地址)
4.Divisional Lines/Grids(分區線/網格 屬性)
numDivLines='>0'(水平網格線的數量)
divLineColor='Color'(網格線顏色)
divLineThickness='1-5'(網格線粗細)
divLineAlpha='0-100'(網格線透明度)
divLineIsDashed='0/1'(網格線是否顯示爲虛線)
divLineDashLen='Number'(每個虛線的長度)
divLineDashGap='Number'(每個虛線間的間隔長度)
zeroPlaneColor='Color'(0值處網格線顏色)
zeroPlaneThickness='Number'(0值處網格線粗細)
zeroPlaneAlpha='0-100'(0值處網格線透明度)
showAlternateHGridColor='0/1'(是否交替顯示網格顏色)
alternateHGridColor='Color'(水平網格顏色)
alternateHGridAlpha='Number'(水平網格透明度)
5.Tool-tip(工具提示屬性)
showToolTip='0/1'(是否顯示氣泡提示)
toolTipBgColor='Color'(氣泡提示的背景顏色)
toolTipBorderColor='Color'(汽包提示的邊框顏色)
toolTipSepChar='String'(氣泡提示的分隔符)
showToolTipShadow='0/1'(是否使氣泡提示帶有陰影效果)
6.Paddings and Margins(填充和邊距屬性)
captionPadding
xAxisNamePadding='Number'畫板與x軸標題之間的距離
yAxisNamePadding='Number'(畫板與y軸標題之間的距離)
yAxisValuesPadding='Number'(畫板與y軸值之間的距離)
labelPadding='Number'(畫板離label之間的距離)
valuePadding='Number'(柱子離值之間的距離)
plotSpacePercent='0-80'(兩個bar之間的距離)
chartLeftMargin='Number'(距左邊框的距離)
chartRightMargin='Number'(距右邊框的距離)
chartTopMargin='Number'(距上邊框的距離)
chartBottomMargin='Number'(距下邊框的距離)
canvasLeftMargin='Number'(畫板離左邊的距離)
canvasRightMargin='Number'(畫板離右邊的距離)
canvasTopMargin='Number'(畫板離上邊的距離)
canvasBottomMargin='Number'(畫板離下邊的距離)
7.<set> element(set元素屬性)
label='String'(具體的標籤)
value='Number'(具體的值)
displayValue='String'(顯示的值)
color='Color'(該柱子的顏色)
link='String'(鏈接地址)
toolText='String'(氣泡提示時顯示的值)
showLabel='0/1'(是否顯示標籤)
showValue='0/1'(是否顯示此柱子的值)
dashed='0/1'(柱子的邊框是否顯示爲虛線)
alpha='Number'(柱子的透明度)
8.Plot Cosmetics(節點美容屬性)
useRoundEdges='0/1'(是否顯示光滑邊緣)
showPlotBorder='0/1'(是否顯示柱子的邊框)
plotBorderColor='Color'(柱子邊框的顏色)
plotBorderThickness='0-5'(柱子邊框的厚度)
plotBorderAlpha='0-100'(柱子邊框的透明度)
plotBorderDashed='0/1'(柱子邊框是否顯示爲虛線)
plotBorderDashLen='Number'(虛線的長度)
plotBorderDashGap='Number'(虛線的間隔)
plotFillAngle='0-360'(數據填充色角度)
plotFillRatio='0-100'(數據填充色比率)
plotFillAlpha='0-100'(數據填充色透明度)
plotGradientColor='Color'(數據的有坡度顏色方案)
9.Number Formatting(數字格式化屬性)
formatNumber='0-1'(是否格式化數值)
formatNumberScale='0-1'(是否對大數值以k,M方式表示)
defaultNumberScale='String'(默認的數字格式化)
numberScaleUnit='String'(設置進位規則對應的單位eg:k,m,b)
numberScaleValue='String'(設置進位的規則eg:1000,1000,1000)
numberPrefix='String'(數值前綴)
numberSuffix='String'(數值後綴)
decimalSeparator='String'(設置小數點的分隔符的表示形式,|.)
thousandSeparator='String'(設置3位數值之間的分隔符的表示形式,|.)
inDecimalSeparator='String'(設置小數分隔符)
inThousandSeparator='String'(設置千位分隔符)
decimals='0-10'(小數點後保留幾位)
forceDecimals='0/1'(小數點後位數不夠的，是否強制補0)
yAxisValueDecimals='0-10'(y軸值保留幾位小數)
10.Font Properties(字體屬性)
baseFont='String'(字體)
baseFontSize='0-72'(字體大小)
baseFontColor='Color'(字體顏色)
outCnvBaseFont='String'(畫板外的字體)
outCnvBaseFontSize='0-72'(畫板外的字體大小)
outCnvBaseFontColor='Color'(畫板外的字體顏色)
11.Vertical Lines(垂直線屬性)
color='Color'(顏色)
thickness='Number'(厚度)
alpha='0-100'(透明度)
dashed='0/1'(是否使用虛線)
dashLen='Number'(虛線的長度)
dashGap='Number'(虛線間隔的長度)
label='String'(此垂直線的名字)
showLabelBorder='0/1'(是否顯示label的邊框)
linePosition='0/1'(line的位置)
labelPosition='0/1'(label的位置)
labelHAlign='left/center/right'(水平線label的位置)
labelVAlign='top/middle/bottom'(垂直線label的位置)
12.Trend Lines(趨勢線屬性)
startValue='Number'(開始值)
endValue='Number'(結束值)
displayValue='String'(顯示的值)
color='Color'(顏色)
isTrendZone='0/1'(是否顯示趨勢線)
showOnTop='0/1'(趨勢線是否顯示在上面)
thickness='Number'(趨勢線的寬度)
alpha='0-100'(趨勢線的透明度)
dashed='0/1'(趨勢線是否爲虛線)
dashLen='Number'(趨勢線虛線的長度)
dashGap='Number'(虛線之間的間隔長度)
valueOnRight='0/1'(趨勢線的標記是否在右邊)
toolText='String'(趨勢線標記的名字)
四. 結束語
到此爲止我就把FusionCharts的FusionCharts中的Column2D.swf屬性按照官方API的順序一個不漏的全部列出來了。如果大家有看不明白的地方請給我留言，我會考慮翻譯得更清晰易懂些，後期我也會考慮直接把原版英文解釋貼出來，讓大家對照着看，應該更能體會每個屬性的含義，其實很多官方文檔的英文屬性解釋並不難，還是鼓勵大家多看原文檔吧。