在FLEX開發(fā)中有一些小技巧，經(jīng)理在這里總結(jié)下，方便以后查閱，也希望能和大家一起交流。
這些小功能在實際開發(fā)中是很經(jīng)常用的。

一、在DataGrid的列中加圖片
做報表的時候經(jīng)常會在DataGrid中加入一些刻度條或者增減的圖片表示一些API指標值，其實這個功能FLEX可以實現(xiàn)。
在DataGrid-colums-DataGridColumn中有個itemRenderer屬性，這個屬性可以讓你用一個組件來替換這個列中本來的內(nèi)容。
OK，進入正題。
首先，我們先創(chuàng)建一個組件（這里以一個圖形為例），名為MyImage
code清單1

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalAlign="middle" horizontalAlign="right">
<mx:Script>
 <![CDATA[
  override public function set data(value:Object):void{
   if(value != null)
   {
    if(value.num != null)
    {
     show.text = value.num;
     if(Number(value.num)>100)
     {
      imga.source = "img/up.png";
     }
     else
     {
      imga.source = "img/down.png";
     }
    }
   }
  }
 ]]>
</mx:Script>
 <mx:Label id="show" textAlign="right" />
 <mx:Image id="imga" width="18" height="17"/>
</mx:HBox>

這里的num是一個dataField中的值，這里可以用value.num來取到這個值

接下來，我們直接利用itemRenderer屬性把這個組件設(shè)置進去就OK了
code清單2

<mx:DataGridColumn dataField="num" itemRenderer="MyImage" headerText="上月環(huán)比(%)" fontSize="12"/>

當然，我們除了加圖片還可以加入一些控件進去。方法也如上就是了。

二、列表多表頭
用AdvancedDataGrid來繪制多表頭。如果有上下兩層的表頭，那么主表頭就用AdvancedDataGridColumnGroup標簽，子表頭用AdvancedDataGridColumn嵌在AdvancedDataGridColumnGroup標簽內(nèi)就可以了。
code清單3

<mx:AdvancedDataGrid headerColors="[#60beff,#1273ce]" alternatingItemColors="[#FFFDCE, #C8ECFF]"
           id="dataGrid" click="onXMLLoaded();"
           dataProvider="{array_datas}"
           width="100%" height="85%"
           variableRowHeight="true" fontSize="12"
           headerSortSeparatorSkin="mx.skins.ProgrammaticSkin"
           wordWrap="true">
        <mx:groupedColumns>
 
        <mx:AdvancedDataGridColumn dataField="org" headerText="單位" headerWordWrap="true" />
        <mx:AdvancedDataGridColumnGroup id="shuma" headerText="管理費用總額（萬元）" textAlign="center">
              <mx:AdvancedDataGridColumn dataField="arr1" headerText="2010年上半年" />
              <mx:AdvancedDataGridColumn dataField="arr2" headerText="上年同期" />
              <mx:AdvancedDataGridColumn dataField="arr3" itemRenderer="MyImage" headerText="同比增長（%）" />
        </mx:AdvancedDataGridColumnGroup>
        <mx:AdvancedDataGridColumnGroup id="baiyuan" headerText="百元收入管理費用（元）" textAlign="center">
              <mx:AdvancedDataGridColumn dataField="brr1" headerText="2010年上半年" />
              <mx:AdvancedDataGridColumn dataField="brr2" headerText="上年同期" />
              <mx:AdvancedDataGridColumn dataField="brr3" itemRenderer="MyImage" headerText="同比增長（%）" />
        </mx:AdvancedDataGridColumnGroup>
        </mx:groupedColumns>
</mx:AdvancedDataGrid>

這里值得注意的有幾個屬性：
headerSortSeparatorSkin：用于定義 AdvancedDataGrid 控件中標題的文本和圖標部分之間分隔符的外觀。這個東西主要是用來去掉AdvancedDataGrid多表頭旁邊的一個線條。
variableRowHeight：一個標志，指示各行是否可以采用不同的高度。
更多的樣式請參考...
http://m.tkk7.com/zhangyuan/archive/2010/08/27/330064.html

三、Chart雙坐標軸
在Chart標簽中實際上除了dataProvider還有secondDataProvider這樣的屬性，也有類似secondSeries的一系列標簽，這些標簽都是為雙坐標軸服務(wù)的。要做雙坐標的圖表其實很簡單..
code清單4

四、Chart中自定義提示（labelFunction）
在Chart的Series中，有l(wèi)abelFunction屬性，這個屬性是為了擴展提示用的
code清單5

<mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 
 showDataTips="true" dataProvider="{data.data1}">          
 <mx:series>
  <mx:PieSeries nameField="org" labelPosition="callout" field="hav" labelFunction="showlabel" />
 </mx:series>
</mx:PieChart>

這里的showlabel其實就是現(xiàn)實提示的這個方法，那么我們在as中定義好這個方法
code清單6

private function showlabel(data:Object, percentValue:Number):String {
 var temp:String= (" " + percentValue).substr(0,6);
 return data.org + ": " + '\n' + "累計中標額: " + data.hav + "(萬元)" + '\n' + temp + "%";
}

這里是餅圖的幾個參數(shù)
其中通過data.xxx可以取到數(shù)據(jù)，percentValue是餅圖自動計算出的百分比數(shù)。

如果想圖個簡單,不用那個百分比可以這樣寫
code清單7
private function showlabel(hitData:HitData):String {
 return  "<font size='12'>"+hitData.item.org+"</font><br>"+hitData.item.num2+"%";         
}

效果都還不錯

五、Chart的漸變色
這里的漸變分背景漸變和圖表元素漸變
先來說下背景漸變：
經(jīng)理以ColumnChart為例

code清單7

<mx:fill>
 <mx:LinearGradient angle="70">
  <mx:GradientEntry color="#02817c" />
  <mx:GradientEntry color="#ffffff" />
 </mx:LinearGradient>
</mx:fill>

GradientEntry標簽代表漸變的顏色，顯然這里只有從#02817c到#ffffff的漸變效果，那么直接把這個代碼加在ColumnChart標簽里就可以了。

圖表元素漸變和背景漸變差不多

code清單8

<mx:ColumnSeries yField="percomplete">
      <mx:fill>
       <mx:LinearGradient>
        <mx:GradientEntry color="#810202" ratio="0"  />
        <mx:GradientEntry color="#e30b0b" ratio=".2"  />
        <mx:GradientEntry color="#ffffff" ratio=".4"  />
        <mx:GradientEntry color="#e30b0b" ratio=".8"  />
        <mx:GradientEntry color="#810202" ratio="1"  />
       </mx:LinearGradient>
      </mx:fill>
     </mx:ColumnSeries>

這樣非常好看