FusionCharts參數說明 （中文）

標籤：color   swf   out   不顯示   知識   配置   漢字   sdn   顯示   

FushionCharts是把抽象資料圖示化的套件，使用方便，配置簡單。其相關參數中文說明如下。

 FusionCharts Free中文開發指南第二版.pdf

 

功能特性
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                增加數字尾碼    % 為 ‘%25‘ / (噸)為‘%ef%bc%88%e5%90%a8%ef%bc%89’（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‘

asp執行個體：

    .write("<graph caption=‘市場行情 ("&gftime1&" — "&gftime2&")‘ subcaption=‘‘ formatNumberScale=‘0‘ decimalPrecision=‘0‘ showvalues=‘0‘ yaxisminvalue=‘2000‘ yaxismaxvalue=‘3500‘   showhovercap=‘1‘ shownames=‘0‘ rotateNames=‘0‘ baseFontSize=‘10‘ numdivlines=‘8‘ numVDivLines=‘11‘ chartLeftMargin=‘0‘ chartRightMargin=‘2‘ setAdaptiveYMin=‘1‘ lineThickness=‘0.3‘  anchorRadius=‘1.5‘ anchorBgAlpha=‘10‘ anchorBgColor=‘ff0000‘ hoverCapBgColor =‘f7f7f7‘ hoverCapSepChar=‘ , ‘ canvasBorderThickness=‘1‘ canvasBorderColor=‘bfbfbf‘ showLegend=‘1‘ showAlternateHGridColor=‘1‘ animation=‘1‘ showColumnShadow=‘1‘  baseFontColor=‘111111‘ vDivLineColor=‘f3f3f3‘ divLineColor=‘f3f3f3‘ alternateHGridColor=‘e4f0fe‘ showDivLineValues=‘0‘ showFCMenuItem=‘1‘ useRoundEdges=‘1‘ showLimits=‘1‘ >")

。。。。。。。。。

    .write("<dataset seriesName=‘‘ color=‘496a1d‘ anchorBorderColor=‘496a1d‘ anchorBgColor=‘496a1d‘>")

FusionCharts參數說明 （中文）