關於FusionCharts的基本介紹,我就不在此處詳細介紹了,想了解的朋友請移步至>>>FusionCharts中文介紹。接下來,咱們步入今天關於FusionCharts的主題-FusionCharts屬性介紹。canvas
JavaScript圖表FusionCharts中不少不一樣的圖、不一樣類型的圖其實有不少共通的屬性,固然也有一些各自特殊的屬性。首先,咱們一塊兒來看一下FusionCharts的通用屬性吧。ide
上圖爲FusionCharts的FusionCharts中Column2D.swf的屬性。我將拿此圖的屬性做爲例子講解,由於此圖的屬性幾乎所有爲通用屬性。(具體是99%通用仍是100%通用這個我還真沒有統計過,至少是95%通用吧)。屬性的分類就以官方的API文檔爲準吧:工具
一、Chart:字體
<1>Functional Attributes(功能屬性)動畫
<2>Titles and Axis Names(標題和座標抽名字)orm
<3> Charts Cosmetics(圖表美容屬性)對象
<4>Divisional Lines/Grids(分區線/網格 屬性)圖片
<5>Tool-tip(工具提示屬性)ip
<6>Paddings and Margins(填充和邊距屬性)ci
二、Data:
<1><set> element(set元素屬性)
<2>Plot Cosmetics(節點美容屬性)
三、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' >
好了,瞭解了這麼多了。下面的就簡單了,讓我來一一介紹具體的每一個屬性吧。
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軸的最小值)
Titles and Axis Names(標題和座標抽名字)
caption='String'(主標題名字)
subCaption='String'(副標題名字)
xAxisName='String'(X軸名字)
yAxisName='String'(Y軸名字)
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的連接地址)
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'(水平網格透明度)
Tool-tip(工具提示屬性)
showToolTip='0/1'(是否顯示氣泡提示)
toolTipBgColor='Color'(氣泡提示的背景顏色)
toolTipBorderColor='Color'(汽包提示的邊框顏色)
toolTipSepChar='String'(氣泡提示的分隔符)
showToolTipShadow='0/1'(是否使氣泡提示帶有陰影效果)
Paddings and Margins(填充和邊距屬性)
captionPadding='Number'(標題內邊距)
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'(畫板離下邊的距離)
<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'(柱子的透明度)
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'(數據的有坡度顏色方案)
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軸值保留幾位小數)
Font Properties(字體屬性)
baseFont='String'(字體)
baseFontSize='0-72'(字體大小)
baseFontColor='Color'(字體顏色)
outCnvBaseFont='String'(畫板外的字體)
outCnvBaseFontSize='0-72'(畫板外的字體大小)
outCnvBaseFontColor='Color'(畫板外的字體顏色)
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的位置)
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'(趨勢線標記的名字)