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'>")