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編碼）

sNumberPrefix 次Y軸的數字前綴

sNumberSuffix 次Y軸的數字後綴 
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 必定要是惟一的。
第三個參數是圖形的寬。
第四個參數是圖形的高。
咱們還要設置數據文件的地址。
2. myChart.setDataURL("Data.xml");
最後，咱們把圖形渲染在指定的地方。
3. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id，這就表示把圖形render 到"chartdiv"。
如今你運行JSChart.html，你會看到同Chart.html 同樣的效果。很顯然使用JavaScript 加載
圖形，更方便，更直觀。

clickURL=‘abc.jsp‘ 點擊整個圖表時跳轉到abc.jsp
若是使用中文字符需加屬性：rotateYAxisName=‘1’
useRoundEdges=‘1’ 光線效果

 

 

鼠標旋停參數
* showhovercap=」1/0″ : 顯示是否激活鼠標旋停效果
* hoverCapBgColor=」HexColorCode」 : 設置鼠標旋停效果的背景顏色
* hoverCapBorderColor=」HexColorCode」 : 設置鼠標旋停效果的邊框顏色
* hoverCapSepChar=」Char」 : 設置鼠標旋停後顯示的文本中的分隔符號
圖表邊距的設置
* chartLeftMargin=」Numerical Value (in pixels)」 : 設置圖表左邊距
* chartRightMargin=」Numerical Value (in pixels)」 : 設置圖表右邊距
* chartTopMargin=」Numerical Value (in pixels)」 : 設置圖表上邊距
* chartBottomMargin=」Numerical Value (in pixels)」 : 設置圖表下邊距

 

<set> 所具備的屬性
* name=」string」 : 設置在圖表中體現出來的名字
Example: <set name=’Jan’ …>
* value=」NumericalValue」 : 設置在圖表中各個名字想對應的值
Example: <set name=’Jan’ value=’12345′ …>
* color=」HexCode」 : 設置在圖表中相對應的柱行圖的顏色
Example: <set name=’Jan’ value=’12345′ color=’636363′ …>
* hoverText=」String value」 : 設置鼠標旋停在相對應的柱行圖 上出現的文本內容
Example: <set name=’Jan’ value=’12345′ color=’636363′ hoverText=’January’…>
* link=」URL」 : 設置該柱行圖的連接地址（須要URL Encode重編碼）
Example: <set … link=’ShowDetails.asp?Month=Jan’ …>
* alpha=」Numerical Value 0-100″ : 設置在圖表中相對應的柱行圖的透明度
Example: <set … alpha=’100′ …>
* showName=」1″ : 設置在是否顯示圖表中相對應的柱行圖的name
Example : <set … showName=」1″ …>

 

 

如何使用 Styles

 

使用 Styles ，只須要作這些：

• 在 xml 數據文檔中定義本身的樣式屬性。

• 將你定義好的樣式與定義好的圖表對象聯繫起來。

例如：

<chart> <!-- Your data here --> <styles>       <definition>             <style name='MyFirstFontStyle' type='font' face='Verdana' size='12' color='FF0000' bold='1' bgColor='FFFFDD' />             <style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='2' />             <style name='MyFirstShadow' type='Shadow' color='CCCCCC' />       </definition>       <application>             <apply toObject='Caption' styles='MyFirstFontStyle,MyFirstShadow' />             <apply toObject='Canvas' styles='MyFirstAnimationStyle' />             <apply toObject='DataPlot' styles='MyFirstShadow' /> </application>     </styles> </chart>

正如上面你看到的，全部與樣式相關的元素的屬性都出如今父元素 <styles> 下。它能夠有效的包含你的全部的與樣式相關的 xml 代碼。 FusionCharts 不會識別任何定義在父元素 <styles> 以外的樣式定義。

<styles> 元素的子元素是 <definition> 和 <application> 元素。就像名字所暗示的， <definition> 元素包含你爲圖表自定義的樣式，而在 <application> 元素下，你能夠將你自定義的樣式應用到不一樣的圖表對象。

每個樣式必須使用 <style> 元素定義。多個樣式元素能夠逐個放置在 <definition> 元素下。所以，若是你打算定義五個自定義樣式，你須要建立五個 <style> 元素。

根據你要定義的樣式類型，每一個 <style> 元素會有各類各樣的屬性。在上面的例子中，每個 <style> 元素都有本身的屬性集。不過，下面的兩個屬性通用的：

一、 name

二、 type