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