轉帖|其它|編輯:郝浩|2012-01-18 21:17:11.000|閱讀 1624 次
概述:目前,在一些網站上,運用了動畫的FLASH的圖表,給網頁增色不少。下面兩張圖就是“中國站長聯盟”網站給注冊用戶統計網站訪問量的圖表的截圖。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
目前,在一些網站上,運用了動畫的FLASH的圖表,給網頁增色不少。下面兩張圖就是“中國站長聯盟”網站給注冊用戶統計網站訪問量的圖表的截圖。
這種帶有動畫效果的圖表,立馬使得網頁親切起來。
在網上搜索一番后,發現它使用的是FusionCharts的Flash圖表。
FusionCharts是InfoSoft Global公司的一個產品,InfoSoft Global 公司是專業的Flash圖形方案提供商,他們還有幾款其他的基于Flash技術的產品,都非常的漂亮。
FusionCharts Free則是FusionCharts提供的一個免費版本,雖然免費,功能依然強大,圖形類型依然豐富。
FusionCharts是用XML文件作為數據的載體。它從外部的XML文件獲取數據,并根據數據顯示動畫圖表。在XML中定義圖表的各種屬性,和圖表的數據。在應用的時候,我們只要更改XML文件即可。
有關FusionCharts的圖表的圖形的基本元素,參看文章:FusionCharts Free圖形的基本元素 和 FusionCharts欄目。這里不再贅述。
下面,將詳述其中的一個圖表(2D Line)中的XML的屬性說明。
2D Line的XML的屬性,官方文章地址:
里面介紹了數十個屬性,可是我們看看以下實例:
<graph caption='Monthly Sales Summary'
subcaption='For the year 2004' xAxisName='Month'
yAxisMinValue='15000' yAxisName='Sales' decimalPrecision='0'
formatNumberScale='0' numberPrefix='showNames='1'
showValues='0' showAlternateHGridColor='1'
AlternateHGridColor='ff5904' divLineColor='ff5904'
divLineAlpha='20' alternateHGridAlpha='5' >
<set name='Jan' value='17400' hoverText='January'/>
<set name='Feb' value='19800' hoverText='February'/>
<set name='Mar' value='21800' hoverText='March'/>
<set name='Apr' value='23800' hoverText='April'/>
<set name='May' value='29600' hoverText='May'/>
<set name='Jun' value='27600' hoverText='June'/>
<set name='Jul' value='31800' hoverText='July'/>
<set name='Aug' value='39700' hoverText='August'/>
<set name='Sep' value='37800' hoverText='September'/>
<set name='Oct' value='21900' hoverText='October'/>
<set name='Nov' value='32900' hoverText='November' />
<set name='Dec' value='39800' hoverText='December' />
</graph>
通篇只有15個屬性,遠少于官方文章介紹的屬性。是這樣的,如果在XML中沒有輸入這個屬性,FusionCharts的2D Line圖表就會用一個默認值,而各個屬性的默認值,沒有介紹,筆者通過測試,逐步摸索出各個屬性的默認值。貼在這兒和大家交流,其中難免有疏漏,歡迎指正。
bgColor:默認值ffffff。背景色,顏色采用6位16進制的字符表示,分別表示三個三色分量。
bgAlpha:默認值100。背景Alpha,Alpha的取值范圍是0—100。0是全透明,100是全不透明。
bgSWF:默認值是空字符。背景SWF文件。
canvasBgColor:默認值ffffff。畫布背景色。
canvasBgAlpha:默認值100。畫布背景Alpha。
canvasBorderColor:默認值000000。畫布邊框色,默認是黑色。
canvasBorderThickness:默認值2。畫布邊框寬度,0為表示不顯示邊框。
caption:默認值是空字符。圖表的標題。
subCaption:默認值是空字符。圖表的子標題
xAxisName:默認值是空字符。X軸文字
yAxisName:默認值是空字符。Y軸文字
yAxisMinValue:默認值是空字符。Y軸最小值。
yAxisMaxValue:默認值是空字符。Y軸最大值。
注:上面兩個屬性,如果用默認值的話,圖表將采用數據,來計算Y軸的數值范圍
shownames:默認值1。1表示顯示點的名字,0表示不顯示。
showValues:默認值1。1表示顯示點的數值,0表示不顯示。
showLimits:默認值1。1表示顯示圖表的數值的限制區間,0表示不顯示。
rotateNames:默認值0。0表示點的名字顯示時不旋轉,1表示顯示時旋轉一個角度。
animation:默認值1。1表示顯示動畫,0表示不顯示。
lineColor:默認值f8671d。折線顏色,該顏色是偏向橘黃的一種顏色。
lineThickness:默認值2。折線寬度。
lineAlpha:默認值100。折線Alpha。
showShadow:默認值1。1表示顯示折線陰影,0表示不顯示。如果該屬性為0,則下列shadow打頭的屬性都無效。
shadowColor:默認值cccccc。陰影顏色,一種灰色。
shadowThickness:默認值2。陰影寬度。
shadowAlpha:默認值100。陰影Alpha 。
shadowXShift:默認值2。陰影水平位移,可以是負值。
shadowYShift:默認值2。陰影垂直位移,可以是負值。
showAnchors:默認值1。1表示顯示錨點,0表示不顯示。如果該屬性為0,則下列anchor打頭的屬性都無效。
anchorSides:默認值是空字符。錨點的邊數,默認值代表是圓形。可以取大于2的數值,3表示三角形,4表示正方形,依此類推。
anchorRadius:默認值2。錨點的半徑。
anchorBorderColor:默認值f8671d。錨點的邊框色。
anchorBorderThickness:默認值2。錨點的邊框寬度。
anchorBgColor:默認值ffffff。錨點的背景色。
anchorBgAlpha:默認值100。錨點的背景Alpha。
anchorAlpha:默認值100。錨點的Alpha。
注:anchorAlpha屬性設為0時,也是不顯示錨點,不過如果showhovercap為1時,鼠標移到點上時,還能看到提示文字。而 showAnchors屬性設為0時,雖然也不顯示錨點,無論showhovercap取何值,鼠標移到點上時,是看不到提示文字。
baseFont:默認值Verdana。畫布內的字體。
baseFontSize:默認值7。畫布內的字體大小。
baseFontColor:默認值000000。畫布內的字體顏色。
outCnvBaseFont:默認值Verdana。畫布外的字體
outCnvBaseFontSze:默認值7。畫布外的字體大小
outCnvBaseFontColor:默認值000000。畫布外的字體顏色
numberPrefix:默認值是空字符。數值的前綴字符,例如在表示金額的時候,可以用$符號。
numberSuffix:默認值是空字符。數值的后綴字符,如果要使用后綴%,必須用%25標識。
formatNumber:默認值1。1表示格式化顯示數值,0表示正常顯示數值。
formatNumberScale:默認值1。1表示格式化數值,并作標記K、M。例如1000格式化為1K。0表示正常顯示。
decimalSeparator:默認值.。小數點的字符。
thousandSeparator:默認值,。千位數的字符,只有formatNumber為1時才有效
decimalPrecision:默認值2。數值的小數點的保留位數。
divLineDecimalPrecision:默認值2。橫線數值的小數點的保留位數。
limitsDecimalPrecision:默認值2。限制數值區間的小數點的保留位數。
zeroPlaneThickness:默認值2。0軸的線的寬度。
zeroPlaneColor:默認值cccccc。0軸的線的顏色
zeroPlaneAlpha:默認值100。0軸的Alpha。
注:如果圖表中沒有0軸,則上面三個關于0軸的屬性無效。
numdivlines:默認值4。默認時圖表的水平線有4根,將圖表劃分為5個水平塊狀。0表示沒有水平線。
divlinecolor:默認值cccccc。圖表的水平線顏色。
divLineThickness:默認值1。圖表的水平線寬度。
divLineAlpha:默認值100。圖表的水平線的Alpha。
showDivLineValue:默認值1。1表示顯示水平線對應的數值。0表示不顯示。
showAlternateHGridColor:默認值0。1表示顯示水平間隔,0表示不顯示。
alternateHGridColor:默認值cccccc。水平間隔的顏色。
alternateHGridAlpha:默認值70。水平間隔Alpha,注意,這個是70,不是100。
注:以上三個屬性使得圖表顯示垂直顏色交錯的效果。如本文的第二個圖例所示。
numVDivLines:默認值0。表示圖表的垂直線的根數。0表示沒有垂直線。
VDivlinecolor:默認值cccccc。圖表的垂直線顏色。
VDivLineThickness:默認值1。圖表的垂直線寬度。
VDivLineAlpha:默認值100。圖表的垂直線的Alpha。
showAlternateVGridColor:默認值0。1表示顯示垂直間隔,0表示不顯示。
alternateVGridColor:默認值cccccc。垂直間隔的顏色。
alternateVGridAlpha:默認值70。垂直間隔Alpha,注意,這個是70,不是100。
注:以上三個屬性使得圖表顯示水平顏色交錯的效果。垂直間隔的顏色顯示在水平間隔的上方。
showhovercap:默認值1。1表示鼠標移到點上時顯示提示文字,0表示不顯示。
注:該屬性生效還必須showAnchors為1。
提示文字由三部分組成:點的hoverText、間隔符、點的數值。
hoverCapBgColor:默認值f1f1f1。提示文字的背景顏色。
hoverCapBorderColor:默認值cccccc。提示文字的邊框色。
hoverCapSepChar:默認值是,。間隔符的字符。
showhovercap:默認值1。1表示鼠標移到點上時顯示提示文字,0表示不顯示。
注:該屬性生效還必須showAnchors為1。
提示文字由三部分組成:點的hoverText、間隔符、點的數值。
hoverCapBgColor:默認值f1f1f1。提示文字的背景顏色。
hoverCapBorderColor:默認值cccccc。提示文字的邊框色。
hoverCapSepChar:默認值是,。間隔符的字符。
以上屬性在XML中都作為根節點graph的屬性。
<set>作為根節點的子節點,表示圖表中的一個數據點。他也有自己的屬性。例如:
___FCKpd___1
name:必有。該數據點的名字。
value:必有。該書據點的數值。
color:默認值是空字符串。表示這個數據點到下個數據點連線的顏色。默認用LineColor的值
hoverText:默認值是空字符串。該數據點的提示文字。
alpha:默認值100。數據點Alpha。
link:默認值是空字符串。該數據點的超鏈接
showName:默認值1。1表示顯示該數據點的名字,0表示不顯示。
注:shownames為0時,該屬性為任何值都不會顯示名字。shownames為1時,可以設置該屬性為0,來限制某些數據點的顯示名字。
<trendLines>作為根節點的子節點,表示圖表中的一系列趨勢線。
<line>作為<trendLines>的子節點,表示圖表中的一條趨勢線。(從實際來看,叫輔助線更適合)
他也有自己的屬性。例如:
__FCKpd___2
startValue:必有。該趨勢線的起始數值。
endValue:必有。該趨勢線的結束數值。
color:默認值000000。該趨勢線的顏色
thickness:默認值1。該趨勢線的寬度為1
isTrendZone:默認值0。0表示趨勢線是一條直線,1表示趨勢線是一個矩形 showOnTop:默認值0。0表示趨勢線在折線的下方,1表示趨勢線在折線的上方
alpha:趨勢線的Alpha。這個屬性和isTrendZone有關,isTrendZone為0時,該屬性的默認值是100;isTrendZone為1時,該屬性的默認值為40。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:網絡轉載