Flex线形统计图表控件LineChart,LineChart控件将数据系列表示为使用连续线条连接的多个点,可以使用图标或符号来表示该线条上的每个数据点,或者显示一条不带图标的线条。 要求其 series
属性包含 LineSeries 对象 Array。演示如下:
<img src=" http://dl.iteye.com/upload/picture/pic/118701/e7b70de5-9cbe-36c5-bee3-4ad9c8c0fc19.png"/>
源码如下:
- <?xml version="1.0"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="376"
- width="504">
- <mx:Script>
- <![CDATA[
- import mx.collections.ArrayCollection;
- [Bindable]
- private var expensesAC:ArrayCollection = new ArrayCollection( [
- { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
- { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
- { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
- { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
- { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
- ]]>
- </mx:Script>
- <!-- 定义线条样式 -->
- <mx:Stroke id = "s1" color="blue" weight="2"/>
- <mx:Stroke id = "s2" color="red" weight="2"/>
- <mx:Stroke id = "s3" color="green" weight="2"/>
- <mx:Panel title="LineChart and AreaChart Controls Example"
- height="322" width="448" layout="horizontal">
- <mx:LineChart id="linechart" height="100%" width="335"
- paddingLeft="5" paddingRight="5"
- showDataTips="true" dataProvider="{expensesAC}">
- <mx:horizontalAxis><!--表示横向坐标的序列字段-->
- <mx:CategoryAxis categoryField="Month"/>
- </mx:horizontalAxis>
- <mx:series><!--要展示的数据列字段-->
- <mx:LineSeries yField="Profit" form="curve" displayName="利润"
- lineStroke="{s1}"/>
- <mx:LineSeries yField="Expenses" form="curve" displayName="支出"
- lineStroke="{s2}"/>
- <mx:LineSeries yField="Amount" form="curve" displayName="数量"
- lineStroke="{s3}"/>
- </mx:series>
- </mx:LineChart>
- <mx:Legend dataProvider="{linechart}"/>
- </mx:Panel>
- </mx:Application>