原創(chuàng)|其它|編輯:郝浩|2012-06-03 22:12:23.000|閱讀 2876 次
概述:當(dāng)我們想在一張圖形里表示多個(gè)圖形類型時(shí),我們就要用到組合圖。FusionCharts提供了雙Y軸組合圖,它有兩個(gè)Y軸,每個(gè)軸表示不同的刻度(例如,收益和數(shù)量,或者訪問(wèn)量和下載量等等。)。本章我們來(lái)看看什么是組合圖形,以及它的XML是怎么寫的。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
當(dāng)我們想在一張圖形里表示多個(gè)圖形類型時(shí),我們就要用到組合圖。FusionCharts提供了雙Y軸組合圖,它有兩個(gè)Y軸,每個(gè)軸表示不同的刻度(例如,收益和數(shù)量,或者訪問(wèn)量和下載量等等。)。本章我們來(lái)看看什么是組合圖形,以及它的XML是怎么寫的。
圖形左邊的坐標(biāo)軸叫主坐標(biāo)軸,圖形右邊的叫次坐標(biāo)軸。
FusionCharts里組合圖分為2D和3D,下面的圖形就是一個(gè)2D雙Y軸組合圖。
這個(gè)圖里有月銷售額和數(shù)量,X軸表示月份。現(xiàn)在我們來(lái)看看這兩個(gè)Y軸:
主Y軸表示2005和2006的銷售額,柱狀圖和這個(gè)主Y軸對(duì)應(yīng)。
次Y軸表示數(shù)量,曲線圖和次Y軸對(duì)應(yīng)。
在雙Y軸圖形里,我們必須提供至少兩個(gè)數(shù)據(jù)集,一個(gè)對(duì)應(yīng)主Y軸,一個(gè)對(duì)應(yīng)次Y軸。如果你沒(méi)有提供兩個(gè),圖形就不會(huì)正確顯示。
上圖的XML代碼如下:
1. <graph caption='Business Results 2005 v 2006' PYAxisName='Revenue' SYAxisName='Quantity'
2. xAxisName='Month' showValues='0' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70'
3. showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1'
4. alternateHGridColor='f8f8f8' alternateHGridAlpha='60' SYAxisMaxValue='750'
5. >
6. <categories>
7. <category name='Jan' />
8. <category name='Feb' />
9. <category name='Mar' />
10. <category name='Apr' />
11. <category name='May' />
12. <category name='Jun' />
13. <category name='Jul' />
14. <category name='Aug' />
15. <category name='Sep' />
16. <category name='Oct' />
17. <category name='Nov' />
18. <category name='Dec' />
19. </categories>
20.
21. <dataset seriesName='2006' parentYAxis='P' color='c4e3f7' numberPrefix='$'>
22. <set value='27400' />
23. <set value='29800' />
24. <set value='25800' />
25. <set value='26800' />
26. <set value='29600' />
27. <set value='32600' />
28. <set value='31800' />
29. <set value='36700' />
30. <set value='29700' />
31. <set value='31900' />
32. <set value='34800' />
33. <set value='24800' />
34. </dataset>
35.
36. <dataset seriesName='2005' parentYAxis='P' color='Fad35e' numberPrefix='$'>
37. <set value='10000' />
38. <set value='11500' />
39. <set value='12500' />
40. <set value='15000' />
41. <set value='11000' />
42. <set value='9800' />
43. <set value='11800' />
44. <set value='19700' />
45. <set value='21700' />
46. <set value='21900' />
47. <set value='22900' />
48. <set value='20800' />
49. </dataset>
50.
51. <dataset seriesName='Total Quantity' parentYAxis='S'
color='8BBA00' anchorSides='10'
52. anchorRadius='3' anchorBorderColor='009900' >
53. <set value='270' />
54. <set value='320' />
55. <set value='290' />
56. <set value='320' />
57. <set value='310' />
58. <set value='320' />
59. <set value='340' />
60. <set value='470' />
61. <set value='420' />
62. <set value='440' />
63. <set value='480 '/>
64. <set value='360' />
65. </dataset>
66.
67. </graph>
這個(gè)組合圖的XML和一個(gè)多系列圖形的XML較為類似,因此,我們只解釋以下不同的地方。
在雙Y軸組合圖里,有兩個(gè)Y軸,每個(gè)Y軸都可以有它自己的刻度和數(shù)值格式屬性。
PYAxisName表示主軸的名稱,SYAxisName表示次軸的名稱。
在每個(gè)數(shù)據(jù)集里,我們都必須用parentYAxis屬性來(lái)指定它是屬于哪個(gè)軸。這個(gè)屬性的值只能是“P”或“S”。P代表主軸,S代表次軸。例如我們的代碼里,在主軸上有兩個(gè)銷售額數(shù)據(jù)集--“2005”和“2006”:
在次軸上有一個(gè)數(shù)量數(shù)據(jù)集:
1. <dataset seriesName='Total Quantity' parentYAxis='S' ... >
上面的例子里,數(shù)量數(shù)據(jù)集表示的是2005和2006當(dāng)月數(shù)量的總數(shù)。實(shí)際上,我們可以在次軸上也設(shè)置兩個(gè)數(shù)據(jù)集,一個(gè)表示2005年每月的數(shù)量,一個(gè)表示2006年的。大家可以自己練習(xí)一下。
在運(yùn)行這個(gè)例子是,F(xiàn)lash文件應(yīng)該使用FusionCharts_MSColumn2DLineDY.swf,從上圖我們可以看出,它是column和line的組合,因此要用FusionCharts_MSColumn2DLineDY.swf。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:網(wǎng)絡(luò)轉(zhuǎn)載