Flex线形统计图表控件LineChart演示(自定义线条颜色)

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>