flex lineChart Demo-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_12813/article/details/81728871

本文介绍了一个使用Flex进行图表绘制的例子，展示了如何定义笔触和填充，并通过LineChart和AreaChart来展示数据。示例中使用了不同的颜色和样式来区分利润、支出和余额等数据系列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2009-03-18 night_stalker (资深程序员)
举例如下：

定义笔触（颜色和粗细）
<mx:Stroke id = "s1" color="blue" weight="2"/>

定义填充
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>

使用笔触
<mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>

使用笔触和填充
<mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>

一个LineChart的完全例子，使用了3种笔触和填充，摘自http://www.airia.cn/FLEX4API/livedocs/

1. <?xml version="1.0"?>
2. 
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
4.
5. <mx:Script>
6. <![CDATA[
7.
8. import mx.collections.ArrayCollection;
9.
10. [Bindable]
11. private var expensesAC:ArrayCollection = new ArrayCollection( [
12. { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
13. { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
14. { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
15. { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
16. { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
17. ]]>
18. </mx:Script>
19.
20. 
21. <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
22. <mx:SolidColor id="sc2" color="red" alpha=".3"/>
23. <mx:SolidColor id="sc3" color="green" alpha=".3"/>
24.
25. 
26. <mx:Stroke id = "s1" color="blue" weight="2"/>
27. <mx:Stroke id = "s2" color="red" weight="2"/>
28. <mx:Stroke id = "s3" color="green" weight="2"/>
29.
30. <mx:Panel title="LineChart and AreaChart Controls Example"
31. height="100%" width="100%" layout="horizontal">
32.
33. <mx:LineChart id="linechart" height="100%" width="45%"
34. paddingLeft="5" paddingRight="5"
35. showDataTips="true" dataProvider="{expensesAC}">
36.
37. <mx:horizontalAxis>
38. <mx:CategoryAxis categoryField="Month"/>
39. </mx:horizontalAxis>
40.
41. <mx:series>
42. <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
43. <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
44. <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
45. </mx:series>
46. </mx:LineChart>
47.
48. <mx:Legend dataProvider="{linechart}"/>
49.
50. <mx:AreaChart id="Areachart" height="100%" width="45%"
51. paddingLeft="5" paddingRight="5"
52. showDataTips="true" dataProvider="{expensesAC}">
53.
54. <mx:horizontalAxis>
55. <mx:CategoryAxis categoryField="Month"/>
56. </mx:horizontalAxis>
57.
58. <mx:series>
59. <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
60. <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
61. <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
62. </mx:series>
63. </mx:AreaChart>
64.
65. <mx:Legend dataProvider="{Areachart}"/>
66.
67. </mx:Panel>
68. </mx:Application>