转载

FCF中文指南-第八章--FusionCharts Free和组合图XML

本章我们来看看什么是组合图形，以及它的XML是怎么写的。

8.1什么是组合图形

当我们想在一张图形里表示多个图形类型时，我们就要用到组合图。FCF提供了双Y轴组合图，它有两个Y轴，每个轴表示不同的刻度（例如，收益和数量，或者访问量和下载量等等。）。图形左边的坐标轴叫主坐标轴，图形右边的叫次坐标轴。

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

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

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

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

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

8.2代码

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

8.3简单解释

这个组合图的XML和一个多系列图形的XML较为类似，因此，我们只解释以下不同的地方。

在双Y轴组合图里，有两个Y轴，每个Y轴都可以有它自己的刻度和数值格式属性。

PYAxisName表示主轴的名称，SYAxisName表示次轴的名称。

在每个数据集里，我们都必须用parentYAxis属性来指定它是属于哪个轴。这个属性的值只能是“P”或“S”。P代表主轴，S代表次轴。例如我们的代码里，在主轴上有两个销售额数据集--“2005”和“2006”：

68. <dataset seriesName='2006' parentYAxis='P' ... >

69.

70. ...

71.

72. <dataset seriesName='2005' parentYAxis='P' ... >

在次轴上有一个数量数据集：

1. <dataset seriesName='Total Quantity' parentYAxis='S' ... >

上面的例子里，数量数据集表示的是2005和2006当月数量的总数。实际上，我们可以在次轴上也设置两个数据集，一个表示2005年每月的数量，一个表示2006年的。大家可以自己练习一下。

8.4注意

在运行这个例子是，Flash文件应该使用FCF_MSColumn2DLineDY.swf，从上图我们可以看出，它是column和line的组合，因此要用FCF_MSColumn2DLineDY.swf。更多的图形和Flash文件的对应关系，请参见http://ajava.org/hot/fusioncharts/816.html

正文到此结束