如何通过XML实现FusionCharts组合图-控件新闻-慧都网

如何通过XML实现FusionCharts组合图

原创|其它|编辑：郝浩|2012-06-03 22:12:23.000|阅读 2851 次

概述：当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FusionCharts提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。本章我们来看看什么是组合图形，以及它的XML是怎么写的。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FusionCharts提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。本章我们来看看什么是组合图形，以及它的XML是怎么写的。

图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。

FusionCharts里组合图分为2D和3D，下面的图形就是一个2D双Y轴组合图。

FusionCharts,图表,Flash图表,FusionCharts图表,XML

这个图里有月销售额和数量，X轴表示月份。现在我们来看看这两个Y轴：

主Y轴表示2005和2006的销售额，柱状图和这个主Y轴对应。

次Y轴表示数量，曲线图和次Y轴对应。

在双Y轴图形里，我们必须提供至少两个数据集，一个对应主Y轴，一个对应次Y轴。如果你没有提供两个，图形就不会正确显示。

上图的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>