Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

时间：2023-03-09 03:26:34
Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

原文 http://blog.minidx.com/2008/11/27/1652.html

接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFill样式，交错显示LineSeries图表背景颜色。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：

下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xmlversion="1.0"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3. layout="vertical"
  4. verticalAlign="middle"
  5. backgroundColor="white">
  6. <mx:XMLListCollection id="dp">
  7. <mx:source>
  8. <mx:XMLList>
  9. <quote date="8/27/2007"open="40.38"close="40.81"/>
  10. <quote date="8/24/2007"open="40.5"close="40.41"/>
  11. <quote date="8/23/2007"open="40.82"close="40.6"/>
  12. <quote date="8/22/2007"open="40.4"close="40.77"/>
  13. <quote date="8/21/2007"open="40.41"close="40.13"/>
  14. <quote date="8/20/2007"open="40.55"close="40.74"/>
  15. <quote date="8/17/2007"open="40.18"close="40.32"/>
  16. <quote date="8/16/2007"open="39.83"close="39.96"/>
  17. <quote date="8/15/2007"open="40.22"close="40.18"/>
  18. <quote date="8/14/2007"open="41.01"close="40.41"/>
  19. <quote date="8/13/2007"open="41"close="40.83"/>
  20. <quote date="8/10/2007"open="41.3"close="41.06"/>
  21. <quote date="8/9/2007"open="39.9"close="40.75"/>
  22. <quote date="8/8/2007"open="39.61"close="40.23"/>
  23. <quote date="8/7/2007"open="39.08"close="39.42"/>
  24. <quote date="8/6/2007"open="38.71"close="39.38"/>
  25. <quote date="8/3/2007"open="39.47"close="38.75"/>
  26. <quote date="8/2/2007"open="39.4"close="39.52"/>
  27. <quote date="8/1/2007"open="40.29"close="39.58"/>
  28. </mx:XMLList>
  29. </mx:source>
  30. </mx:XMLListCollection>
  31. <mx:LineChart id="lineChart"
  32. showDataTips="true"
  33. dataProvider="{dp}"
  34. width="100%"
  35. height="100%">
  36. <mx:backgroundElements>
  37. <mx:GridLines>
  38. <mx:horizontalAlternateFill>
  39. <mx:SolidColor color="haloSilver"alpha="0.25"/>
  40. </mx:horizontalAlternateFill>
  41. </mx:GridLines>
  42. </mx:backgroundElements>
  43. <!-- vertical axis -->
  44. <mx:verticalAxis>
  45. <mx:LinearAxis baseAtZero="false"title="Price"/>
  46. </mx:verticalAxis>
  47. <!-- horizontal axis -->
  48. <mx:horizontalAxis>
  49. <mx:CategoryAxis id="ca"categoryField="@date"title="Date"/>
  50. </mx:horizontalAxis>
  51. <!-- horizontal axis renderer -->
  52. <mx:horizontalAxisRenderers>
  53. <mx:AxisRenderer axis="{ca}"canDropLabels="true"/>
  54. </mx:horizontalAxisRenderers>
  55. <!-- series -->
  56. <mx:series>
  57. <mx:LineSeries yField="@open"form="curve"displayName="Open"/>
  58. </mx:series>
  59. </mx:LineChart>
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子