LineChart 使用

LineChart 实现2个Y轴不同单位

 

            
                
            
            
            
                
            
            
            
                
                
            
            
            
                
                    
                        
                    
                
                
                
                    
                        
                    
                
            


------------------------------
对象数组，里面的对象是：
public var updateTime:String;
public var tempData:String;
public var humiData:String;

 

flex使用lineChart和DateTimeAxis实现时序图

    
        
    

    
    
        
            
            
                  //时序图的时间设置
            

            
                
            

            
                
                 
            
        
        
    

效果如图

 

 

效果如图

 

 

 

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

定义笔触（颜色和粗细） 
color="blue" weight="2"/> 

定义填充 
color="blue" alpha=".3"/> 

使用笔触 
lineStroke="{s1}"/> 

使用笔触和填充 
areaStroke="{s1}" areaFill="{sc1}"/> 

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

 xml version="1.0"?>

 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

     <mx:Script>


         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:SolidColor id="sc1" color="blue" alpha=".3"/>
     <mx:SolidColor id="sc2" color="red" alpha=".3"/>
     <mx:SolidColor id="sc3" color="green" alpha=".3"/>


     <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="100%" width="100%" layout="horizontal">

         <mx:LineChart id="linechart" height="100%" width="45%"
             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="Profit" lineStroke="{s1}"/>
                 <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                 <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
             mx:series>
         mx:LineChart>

         <mx:Legend dataProvider="{linechart}"/>

         <mx:AreaChart id="Areachart" height="100%" width="45%"
              paddingLeft="5" paddingRight="5"
              showDataTips="true" dataProvider="{expensesAC}">

             <mx:horizontalAxis>
                 <mx:CategoryAxis categoryField="Month"/>
             mx:horizontalAxis>

             <mx:series>
                 <mx:AreaSeries yField="Profit" form="curve" displayName="Profit" areaStroke="{s1}" areaFill="{sc1}"/>
                 <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses" areaStroke="{s2}" areaFill="{sc2}"/>
                 <mx:AreaSeries yField="Amount" form="curve" displayName="Amount" areaStroke="{s3}" areaFill="{sc3}"/>
             mx:series>
         mx:AreaChart>

         <mx:Legend dataProvider="{Areachart}"/>

     mx:Panel>
 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"   解决日期不对