Flex 折綫圖報表lineChart的使用

 flex做報表的功能比較強大，還有個專門做報表anyChart類庫，不過人家是收費的額，不過做折綫圖

報表，lineChart功能基本達到了。比較特別的是它的數據源格式,每一筆數據中，要包含橫座標的數據

和每條折綫在這個橫座標上對應的縱座標的數據，所以sql寫起來也比較費勁，不過還是可以解決的。

這里是個可以動態添加折綫條數的例子，如果需要其他例子可以到http://blog.flexexamples.com/上

找，資源豐富。。。

flex3.5

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="vertical" verticalAlign="middle"
  creationComplete="init();"> 
 <mx:Script>
  <![CDATA[
   import mx.charts.HitData;
   import mx.controls.Alert;
   import mx.controls.HorizontalList;
   import mx.charts.series.LineSeries;
   import mx.charts.LineChart;
   import mx.collections.ArrayCollection;
   
   private var dataSource:ArrayCollection = new ArrayCollection([{Hour:"8:00",Profit:70,Expenses:90,Amount:80},{Hour:"9:00"
   ,Profit:80,Expenses:85,Amount:85},{Hour:"10:00",Profit:85,Expenses:90,Amount:90},{Hour:"11:00",
   Profit:75,Expenses:98,Amount:78}]);

//縱座標數據
   private var dataArray:Array = new Array("Profit","Expenses","Amount");
   private function init():void{
     var arr:Array = new Array();
     //動態添加lineSeries
     for(var i:int = 0; i < dataArray.length ; i ++){
      var line:LineSeries = new LineSeries();
      line.xField = "Hour";
      line.yField = dataArray[i];
      line.displayName= dataArray[i];
      arr.push(line);
     }
     myChart.series = arr;
     
   }
   //鼠標指示的效果
   private function ShowTipData(hd:HitData):String{
                var result:String="";
                var dataKeyObj:Object=hd.element;
                var dataValue:Object=hd.item;
                result="數列: '"+dataKeyObj.yField+"'\n"+"資料點: '"+dataValue[dataKeyObj.xField]+"'\n"+"值: "+dataValue[dataKeyObj.yField];
                return result;
        }
       
  ]]>
 </mx:Script>
 <mx:Legend dataProvider="{myChart}"
                direction="vertical"  />
   <mx:LineChart id="myChart"
        dataProvider="{dataSource}"
        showDataTips="true" dataTipFunction="ShowTipData">
        <!--橫座標-->
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="Hour"/>
        </mx:horizontalAxis>
        <!--縱座標-->
          <mx:verticalAxis>
   <mx:LinearAxis
    title="百分率(%)"/>
   </mx:verticalAxis>
        <mx:series>
         <mx:LineSeries xField="Hour"  form="curve"/>
        </mx:series>
       
        <!--背景 -->
        <mx:backgroundElements>
            <mx:GridLines id="gridLines"
                    direction="both"
                    verticalTickAligned="false">
                <mx:verticalStroke>
                    <mx:Stroke color="haloSilver"
                            weight="0"
                            alpha="1.0" />
                </mx:verticalStroke>
                <mx:horizontalStroke>
                    <!-- Set alpha to 0 so stroke isn't visible. -->
                    <mx:Stroke color="white"
                           weight="0"
                            alpha="0.0" />
                </mx:horizontalStroke>
                <mx:horizontalFill>
                    <mx:SolidColor color="haloSilver"
                            alpha="0.1" />
                </mx:horizontalFill>
            </mx:GridLines>
        </mx:backgroundElements>

 </mx:LineChart>
 <!--線條顏色說明-->
 </mx:Application>