FushionCharts是把抽象數(shù)據(jù)圖示化的套件,使用方便,配置簡(jiǎn)單。其相關(guān)參數(shù)中文說明如下。
功能特性
animation 是否動(dòng)畫顯示數(shù)據(jù),默認(rèn)為 1(True)
showNames 是否顯示橫向坐標(biāo)軸(x軸)標(biāo)簽名稱
rotateNames 是否旋轉(zhuǎn)顯示標(biāo)簽,默認(rèn)為0(False):橫向顯示
showValues 是否在圖表顯示對(duì)應(yīng)的數(shù)據(jù)值,默認(rèn)為1(True)
yAxisMinValue 指定縱軸(y軸)最小值,數(shù)字
yAxisMaxValue 指定縱軸(y軸)最大值,數(shù)字
showLimits 是否顯示圖表限值(y軸最大、最小值),默認(rèn)為1(True)
showColumnShadow 是否顯示各條形圖間的陰影(若柱面圖在一起并列的話)
showAlternateHGridColor 是否隔行顯示不同顏色
圖表標(biāo)題和軸名稱
caption 圖表主標(biāo)題
subCaption 圖表副標(biāo)題
xAxisName 橫向坐標(biāo)軸(x軸)名稱
yAxisName 縱向坐標(biāo)軸(y軸)名稱
imageSave='1' 是否保存圖片
imageSaveURL='Path/FusionChartsSave.jsp '圖片路徑
hoverCapSepChar=','。鼠標(biāo)放到柱面上時(shí)顯示的提示信息的分隔符
showhovercap='1' 鼠標(biāo)放到柱面上時(shí)是否顯示提示信息
hoverCapBgColor=‘ffffff’提示信息背景顏色
圖表和畫布的樣式
bgColor 圖表背景色,6位16進(jìn)制顏色值
canvasBgColor 畫布背景色,6位16進(jìn)制顏色值
canvasBgAlpha 畫布透明度,[0-100]
canvasBorderColor 畫布邊框顏色,6位16進(jìn)制顏色值
canvasBorderThickness 畫布邊框厚度,[0-100]
shadowAlpha 投影透明度,[0-100]
showLegend 是否顯示系列名,默認(rèn)為1(True)
字體屬性
baseFont 圖表字體樣式
baseFontSize 圖表字體大小
baseFontColor 圖表字體顏色,6位16進(jìn)制顏色值
outCnvBaseFont 圖表畫布以外的字體樣式
outCnvBaseFontSize 圖表畫布以外的字體大小
outCnvBaseFontColor 圖表畫布以外的字體顏色,6位16進(jìn)制顏色值
分區(qū)線和網(wǎng)格
numDivLines 畫布內(nèi)部水平分區(qū)線條數(shù),數(shù)字
divLineColor 水平分區(qū)線顏色,6位16進(jìn)制顏色值
divLineThickness 水平分區(qū)線厚度,[1-5]
divLineAlpha 水平分區(qū)線透明度,[0-100]
showAlternateHGridColor 是否在橫向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateHGridColor 橫向網(wǎng)格帶交替的顏色,6位16進(jìn)制顏色值
alternateHGridAlpha 橫向網(wǎng)格帶的透明度,[0-100]
showDivLineValues 是否顯示Div行的值,默認(rèn)??
numVDivLines 畫布內(nèi)部垂直分區(qū)線條數(shù),數(shù)字
vDivLineColor 垂直分區(qū)線顏色,6位16進(jìn)制顏色值
vDivLineThickness 垂直分區(qū)線厚度,[1-5]
vDivLineAlpha 垂直分區(qū)線透明度,[0-100]
showAlternateVGridColor 是否在縱向網(wǎng)格帶交替的顏色,默認(rèn)為0(False)
alternateVGridColor 縱向網(wǎng)格帶交替的顏色,6位16進(jìn)制顏色值
alternateVGridAlpha 縱向網(wǎng)格帶的透明度,[0-100]
數(shù)字格式
numberPrefix 增加數(shù)字前綴
numberSuffix 增加數(shù)字后綴 % 為 '%25' / (噸)為‘%ef%bc%88%e5%90%a8%ef%bc%89’(Server.UrlEncode編碼)
formatNumberScale 是否格式化數(shù)字,默認(rèn)為1(True),自動(dòng)的給你的數(shù)字加上K(千)或M(百萬);若取0,則不加K或M
decimalPrecision 指定小數(shù)位的位數(shù), [0-10] 例如:='0' 取整
divLineDecimalPrecision 指定水平分區(qū)線的值小數(shù)位的位數(shù), [0-10]
limitsDecimalPrecision 指定y軸最大、最小值的小數(shù)位的位數(shù),[0-10]
formatNumber 逗號(hào)來分隔數(shù)字(千位,百萬位),默認(rèn)為1(True);若取0,則不加分隔符
decimalSeparator 指定小數(shù)分隔符,默認(rèn)為'.'
thousandSeparator 指定千分位分隔符,默認(rèn)為','
Tool- tip/Hover標(biāo)題
showhovercap 是否顯示懸停說明框,默認(rèn)為1(True)
hoverCapBgColor 懸停說明框背景色,6位16進(jìn)制顏色值
hoverCapBorderColor 懸停說明框邊框顏色,6位16進(jìn)制顏色值
hoverCapSepChar 指定懸停說明框內(nèi)值與值之間分隔符,默認(rèn)為','
折線圖的參數(shù)
lineThickness 折線的厚度
anchorRadius 折線節(jié)點(diǎn)半徑,數(shù)字
anchorBgAlpha 折線節(jié)點(diǎn)透明度,[0-100]
anchorBgColor 折線節(jié)點(diǎn)填充顏色,6位16進(jìn)制顏色值
anchorBorderColor 折線節(jié)點(diǎn)邊框顏色,6位16進(jìn)制顏色值
Set標(biāo)簽使用的參數(shù)
value 數(shù)據(jù)值
color 顏色
link 鏈接(本窗口打開[Url],新窗口打開[n-Url],調(diào)用JS函數(shù)[JavaScript:函數(shù)])
name 橫向坐標(biāo)軸標(biāo)簽名稱
showFCMenuItem='0' 設(shè)置右鍵顯示不顯示
簡(jiǎn)單使用
1. varmyChart= newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "
500");
第一個(gè)參數(shù)是SWF 文件的地址。
第二個(gè)是圖形的id。這個(gè)id 你可以隨便叫什么,但是要注意,在后面我們講到一個(gè)頁(yè)面里有
多個(gè)圖形的時(shí)候,這個(gè)id 一定要是唯一的。
第三個(gè)參數(shù)是圖形的寬。
第四個(gè)參數(shù)是圖形的高。
我們還要設(shè)置數(shù)據(jù)文件的地址。
1. myChart.setDataURL("Data.xml");
最后,我們把圖形渲染在指定的地方。
1. myChart.render("chartdiv");
"chartdiv"就是前面的DIV 的id,這就表示把圖形render 到"chartdiv"。
現(xiàn)在你運(yùn)行JSChart.html,你會(huì)看到同Chart.html 一樣的效果。很顯然使用JavaScript 加載
圖形,更方便,更直觀。
如果你想在一個(gè)新的窗口打開鏈接頁(yè)面,只需要在連接的前面加上“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數(shù)據(jù)節(jié)點(diǎn)和常用屬性
caption=‘標(biāo)題‘
subcaption=‘子標(biāo)題‘
clickURL=‘a(chǎn)bc.jsp‘ 點(diǎn)擊整個(gè)圖表時(shí)跳轉(zhuǎn)到abc.jsp
xAxisName=部門‘
numberPrefix =‘¥’ 數(shù)據(jù)前綴單位
numberSuffix =‘個(gè)’ 數(shù)據(jù)后綴單位
Decimals=‘2’ 保留兩位小數(shù),四舍五入
forceDecimals=‘2’ 強(qiáng)制保留兩位小數(shù),對(duì)于5.1 轉(zhuǎn)換為5.10
yAxisName=‘完成率’
如果使用漢字漢符需加屬性:rotateYAxisName=‘1’
showValues=‘1’
yAxisMaxValue=‘100’
對(duì)于百分比的常用bgColor='999999,FFFFFF‘
漸變bgColor=‘999999 ’ 單色
useRoundEdges=‘1’ 光線效果
baseFont=‘宋體‘
baseFontSize='12'
baseFontColor='333333'