自定义flex图表toptip的提示

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="iniApp()" mouseOut="resize_handler(event)" mouseUp="resize_handler(event)" mouseMove="resize_handler(event)" viewSourceURL="srcview/index.html">
 <!-- 水位库容关系曲线  -->
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 <fx:Style>
  .mystyle{
   fontSize:14px;
   fontFamily:"Arial";
   fontWeight:bold;
  } 
 </fx:Style>
 <fx:Script>
  <![CDATA[
   import com.adobe.serialization.json.JSON;
   
   import mx.charts.chartClasses.IAxis;
   import mx.charts.chartClasses.IAxisRenderer;
   import mx.charts.series.items.ColumnSeriesItem;
   import mx.charts.series.items.LineSeriesItem;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.ResizeEvent;
   import mx.rpc.events.ResultEvent;
   [Bindable]
   private var chardata:ArrayCollection = new ArrayCollection();
   [Bindable]
   private var clientHeight:Number ;
   [Bindable]
   private var clientWidth:Number ;
   [Bindable]
   private var title:String = "";
   [Bindable]
   private var colX:String = "";
    [Bindable]
   private var colYR:String = "";
   [Bindable]
   private var colYL:String = "";  
   [Bindable]
   private var unitX:String = "";
   [Bindable]
   private var unitYR:String = "";
   [Bindable]
   private var unitYL:String = "";  
   [Bindable]
   private var MinVal:Number = 0;
   [Bindable]
   private var MaxVal:Number = 0;
   private var count:Number = 0;
   private var num:Number = 0;
   [Bindable]
   public var expenses:ArrayCollection = new ArrayCollection([
    {Month:"Jan1", Expensesx:-100,Expenses1:100,Expenses2:120},
    {Month:"Feb2", Expensesx:-200,Expenses1:200,Expenses2:220},
    {Month:"Mar3", Expensesx:-300,Expenses1:300,Expenses2:320},
    {Month:"Mar4", Expensesx:-400,Expenses1:400,Expenses2:420},
    {Month:"Mar5", Expensesx:-500,Expenses1:500,Expenses2:520},
    {Month:"Mar6", Expensesx:-600,Expenses1:600,Expenses2:620},
    {Month:"Mar7", Expensesx:-700,Expenses1:700,Expenses2:720},
    {Month:"Mar8", Expensesx:-800,Expenses1:800,Expenses2:820},
    {Month:"Mar9", Expensesx:-900,Expenses1:900,Expenses2:920},
    {Month:"Mar10", Expensesx:-1000,Expenses1:1000,Expenses2:1020}
   ]);
   private function resize_handler(event:Event):void{
    clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}");
    clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}");
   }
   private function iniApp():void{
    this.addEventListener(ResizeEvent.RESIZE,resize_handler);
    clientHeight = ExternalInterface.call("function(){return document.body.clientHeight;}");
    clientWidth = ExternalInterface.call("function(){return document.body.clientWidth;}");
    var element:Object = getParams();
    if(typeof(element.url) != "undefined" && element.url != ""){
     //service3.url = "http://localhost:9100/rrams/baseinfo.do?method=getData_Rzv_List";
     service3.url = decodeURIComponent(element.url)+"&start=0&limit=10000";//"http://localhost:8100/rrams/baseinfo.do?method=getData_Flood_List&floodseason=1&name_id=402880fa28d8e8590128d916bb6a0013";
     service3.send();
     //Alert.show(decodeURIComponent("http%3A%2F%2Flocalhost%3A8100%2Frrams%2Fbaseinfo.do%3Fmethod%3DgetData_Flood_List%26floodseason%3D1%26name_id%3D402880fa28d8e8590128d916bb6a0013"));
    }
   }
   private function charDataLoad(event:ResultEvent):void{
    var rawData:String = String(event.result); 
    if(rawData != ""){
     var arr:Array = (JSON.decode(rawData).root as Array);
     var totalProperty:Number = (JSON.decode(rawData).totalProperty as Number);
     var chartP:Array = JSON.decode(rawData).chart;
     this.colYL = chartP[0].colYL;//y属性名称
     this.colYR = chartP[0].colYR;//y属性名称
     this.colX = chartP[0].colX;//x属性名称
     
     this.unitX = chartP[0].unitX;//单位
     this.unitX =  this.unitX.replace("m3","ｍ³").replace("m2","ｍ²");
     
     this.unitYL = chartP[0].unitYL;
     this.unitYL =  this.unitYL.replace("m3","ｍ³").replace("m2","ｍ²");
     this.unitYR = chartP[0].unitYR;
     this.unitYR =  this.unitYR.replace("m3","ｍ³").replace("m2","ｍ²");
     
     if(totalProperty>50){
      this.num = Math.floor(totalProperty/10);
     }else if(totalProperty>20){
      this.num = Math.floor(totalProperty/5);
     }else if(totalProperty>10){
      this.num = Math.floor(totalProperty/2);
     }else{
      this.num = 1;
     }
     
     //这是取整数
     if(typeof(chartP[0].MinVal) != "undefined"){
      var min:Number = chartP[0].MinVal;
      this.MinVal = min - Math.floor(chartP[0].MinVal/10);
     }
     if(typeof(chartP[0].MaxVal) != "undefined"){
      var max:Number =chartP[0].MaxVal;
      this.MaxVal = max + Math.floor(chartP[0].MaxVal/10);
     }
     
     this.chardata = new ArrayCollection(arr);
     this.chardata.refresh();
    }
   }
   private function getParams():Object {
    var params:Object;
    params = {};
    var query:String = ExternalInterface.call("window.location.search.substring", 1);
    
    if(query) {
     var pairs:Array = query.split("&");
     for(var i:uint=0; i < pairs.length; i++) {
      var pos:int = pairs[i].indexOf("=");
      if(pos != -1) {
       var argname:String = pairs[i].substring(0, pos);
       var value:String = pairs[i].substring(pos+1);
       params[argname] = value;
      }
     }
    }
    return params;
   }
   private function dataTipFunc(item:Object):String {
    var curObj:Object = item.item;
    var curSeries:Object = Object(item.chartItem.element);
    var str:String = "";
    if(curSeries.displayName == "降雨量(mm)"){
     var cSI1:ColumnSeriesItem = item.chartItem as ColumnSeriesItem;
     str =  "<font>时间:"+cSI1.xValue.toString()+ "<br>";
     str += curSeries.displayName+":"+(0-(cSI1.yValue as Number)).toString();
     str+="</font>";
    }else{
     var cSI:LineSeriesItem = item.chartItem as LineSeriesItem;
     str =  "<font>时间:"+cSI.xValue.toString()+ "<br>";
     str += curSeries.displayName+":"+cSI.yValue.toString();
     str+="</font>";
    }
    return str;
   }
   private function chariniApp(){
    char_date.filters = [];
   }
   public function CategoryFunction(axis:LinearAxis,item:Object):Object {
    return(item.Country.State);
   }
   function ccclabelFunction(axisRenderer:IAxisRenderer,label:String):String {
    count ++;
    if((count % this.num) == 0){
     return label;
    }else{
     return "";
    }
   }
   private function labelFunction3(value:Object, preValue:Object, axis:IAxis):String {
    var currentValue:Number = Number(value);
    return (-currentValue).toString();
   }
  ]]>
 </fx:Script>
 <fx:Declarations>
  <mx:HTTPService id="service3" resultFormat="text" result="charDataLoad(event)"/>
  <mx:Parallel id="showEffects">
   <mx:WipeRight duration="5000"/>
   <mx:Pause duration="1000" />
   <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>  
   <mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="2.0" alphaTo="3.0"/>
   <mx:Fade alphaFrom="10" alphaTo="10" duration="5000"/>
  </mx:Parallel>
 </fx:Declarations>
 
 <mx:HBox backgroundColor="White" id="char_date"  width="100%" height="{this.clientHeight}" textAlign="center" initialize="chariniApp" >
  <mx:CartesianChart styleName="mystyle" id="linechart1" dataProvider="{this.expenses}"  width="{this.clientWidth - this.legendbox.width-10}" height="{this.char_date.height}"  seriesFilters="[]" dataTipFunction="dataTipFunc"  showDataTips="true">
   <!-- 背景 -->
   <mx:backgroundElements>
    <mx:GridLines horizontalChangeCount="1" >
     <mx:horizontalAlternateFill>
      <mx:SolidColor color="haloSilver" alpha="0.25" />
     </mx:horizontalAlternateFill>
     <mx:verticalAlternateFill>
      <mx:SolidColor color="haloSilver" alpha="0.25" />
     </mx:verticalAlternateFill>
    </mx:GridLines>
   </mx:backgroundElements>
   
   <!-- 横轴-->
   <mx:horizontalAxis>
    <mx:CategoryAxis id="axis1"
         dataProvider="{expenses}"
         categoryField="Month"
         />
   </mx:horizontalAxis>
   <!-- 横轴渲染器 -->
   <mx:horizontalAxisRenderers>
    <mx:AxisRenderer id="horAxisRend"
         axis="{axis1}"
         placement="top"
         />
   </mx:horizontalAxisRenderers>
   <!-- 纵轴渲染器 -->
   <mx:verticalAxisRenderers>
    <mx:AxisRenderer id="vertAxisRend"
         axis="{axis2}"
         verticalAxisTitleAlignment="vertical"
         placement="left" />
    <mx:AxisRenderer id="vertAxisRend2"
         axis="{axis3}"
         placement="right"/>
   </mx:verticalAxisRenderers> 
   
   <!-- 数据系列 -->
   <mx:series>
    <mx:ColumnSeries xField="Month" yField="Expensesx"  displayName="降雨量(mm)">
     <mx:verticalAxis>
      <mx:LinearAxis  title="降雨量(mm)" id="axis2" labelFunction="labelFunction3"/>
     </mx:verticalAxis>
    </mx:ColumnSeries>
    <mx:LineSeries yField="Expenses1" xField="Month"  form="curve" displayName="流量m²/s">
     <mx:verticalAxis>
      <mx:LinearAxis id="axis3" minimum="0" maximum="1200" title="流量m²/s"/>
     </mx:verticalAxis>
    </mx:LineSeries>
    <mx:LineSeries yField="Expenses2" xField="Month"  form="curve" displayName="预报流量m²/s">
     <mx:verticalAxis>
      <mx:LinearAxis id="axis4" title="预报流量m²/s" minimum="0" maximum="1200"/>
     </mx:verticalAxis>
    </mx:LineSeries>
   </mx:series>
  </mx:CartesianChart>
  <mx:VBox id="legendbox" width="100">
   <mx:Legend  styleName="mystyle" dataProvider="{linechart1}" id="legend"  direction="vertical" />
  </mx:VBox>
 </mx:HBox>
</s:Application>