flex lineChart Demo

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. <!-- 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>