LineChart 使用

LineChart 实现2个Y轴不同单位

 

<mx:LineChart id="roomChart" dataProvider="{chartDataList}" showDataTips="true" width="90%" top="40" horizontalCenter="0" fontSize="14">
            <mx:horizontalAxis>
                <mx:CategoryAxis id="hor" categoryField="updateTime" title="时间" padding="0.5"/>
            </mx:horizontalAxis>
            
            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axis="{hor}" canDropLabels="true"/>
            </mx:horizontalAxisRenderers>
            
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer placement="left" axis="{v1}"/>
                <mx:AxisRenderer placement="right" axis="{v2}"/>
            </mx:verticalAxisRenderers>
            
            <mx:series>
                <mx:LineSeries yField="tempData" displayName="时间/温度(℃)" horizontalAxis="{hor}">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v1" title="温度" baseAtZero="false" maximum="40" minimum="-10"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
                
                <mx:LineSeries yField="humiData" displayName="时间/湿度(％)" horizontalAxis="{hor}">
                    <mx:verticalAxis>
                        <mx:LinearAxis id="v2" title="湿度" baseAtZero="true" maximum="100" minimum="0"/>
                    </mx:verticalAxis>
                </mx:LineSeries>
            </mx:series>

</mx:LineChart>
------------------------------
对象数组，里面的对象是：
public var updateTime:String;
public var tempData:String;
public var humiData:String;

 

flex使用lineChart和DateTimeAxis实现时序图

<?xml version="1.0"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <!--[CDATA[

            import mx.collections.ArrayCollection;

            [Bindable] 
            public var stockDataAC:ArrayCollection = new ArrayCollection( [
                {date: "2005, 1, 27", close: 41.71, next: 41.71},
                {date: "2005, 2, 28", close: 42.21, next: 42.71},
                {date: "2005, 3, 29", close: 42.11, next: 43.71},
                {date: "2005, 4, 1", close: 42.71, next: 44.71},
                {date: "2005, 5, 2", close: 42.99, next: 45.71},
                {date: "2005, 6, 3", close: 44,    next: 47.71},
                {date: "2005, 6, 27", close: 41.71, next: 41.71},
                {date: "2005, 7, 28", close: 42.21, next: 42.71},
                {date: "2005, 8, 29", close: 42.11, next: 43.71},
                {date: "2005, 10, 1", close: 42.71, next: 44.71},
                {date: "2005, 11, 2", close: 42.99, next: 45.71},
                {date: "2005, 12, 3", close: 44,    next: 47.71} ,
                {date: "2006, 1, 27", close: 41.71, next: 41.71},
                {date: "2006, 2, 28", close: 42.21, next: 42.71},
                {date: "2006, 3, 29", close: 42.11, next: 43.71},
                {date: "2006, 4, 1", close: 42.71, next: 44.71},
                {date: "2006, 5, 2", close: 42.99, next: 45.71},
                {date: "2006, 6, 3", close: 44,    next: 47.71},
                {date: "2006, 6, 27", close: 41.71, next: 41.71},
                {date: "2006, 7, 28", close: 42.21, next: 42.71},
                {date: "2006, 8, 29", close: 42.11, next: 43.71},
                {date: "2006, 10, 1", close: 42.71, next: 44.71},
                {date: "2006, 11, 2", close: 42.99, next: 45.71},
                {date: "2006, 12, 3", close: 44, next: 47.71} ]);
    
            public function myParseFunction(s:String):Date { 
                // Get an array of Strings from the comma-separated String passed in.
                var a:Array = s.split(",");
                // Create the new Date object. Subtract one from 
                // the month property because months are zero-based in 
                // the Date constructor.
                var newDate:Date = new Date(a[0],a[1]-1,a[2]);
                return newDate;
            }
        ]]-->
    </mx:Script>

    <mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
    
        <mx:LineChart id="mychart" height="100%" width="100%"
            paddingRight="5" paddingLeft="5" 
            showDataTips="true"  dataProvider="{stockDataAC}" >
            
            <mx:horizontalAxis>
                <mx:DateTimeAxis dataUnits="days" parseFunction="myParseFunction"/>  //时序图的时间设置
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis baseAtZero="false" />
            </mx:verticalAxis>

            <mx:series>
                <mx:LineSeries yField="close" xField="date" displayName="AAPL"/>
                 <mx:LineSeries yField="next" xField="date" displayName="BBPL"/>
            </mx:series>
        </mx:LineChart>
        
    </mx:Panel>
</mx:Application>

效果如图

 

 

效果如图

 

 

 

flex的LineChart中怎样设置线条的粗细和颜色

定义笔触（颜色和粗细） 
<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/ 

Xml代码  

1. <?xml version="1.0"?>  
2. <!-- Simple example to demonstrate the LineChart and AreaChart controls. -->  
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.     <!-- Define custom colors for use as fills in the AreaChart control. -->  
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.     <!-- Define custom Strokes. -->  
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>  

 

Flex中如何通过lineStroke样式改变LineChart图表线条颜色的例子

http://blog.minidx.com/2008/11/23/1644.html

当DateTimeAxis的labelUnits属性为months时，用Flex 4编译，标签会按日期降序显示，用Flex 3编译则没有这个问题。这是Flex 4的Bug，见http://bugs.adobe.com/jira/browse/FLEXDMV-2344。

在Flex 4中，DateTimeAxis的父类NumericAxis增加了一个属性：direction，这使得DateTimeAxis标签可以按日期升序或降序显示。

但此处不能用direction解决这个Bug，得覆写DateTimeAxis是的的buildLabelCache()方法，或是设置disabledDays或disabledRanges属性。

displayLocalTime="true"   解决日期不对