flex 自定义tooltip

//flex用例网址

http://thanksmister.com/2012/01/18/flex-chart-datatip-renderer/

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf65c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7c10

 

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:slc="com.scottlogic.charts.*"
 layout="horizontal"
 width="400"
 height="300"
 viewSourceURL="srcview/index.html"
 >
 <mx:Script>
  <![CDATA[
   import mx.charts.series.items.ColumnSeriesItem;
   import mx.charts.series.ColumnSeries;
   import mx.charts.HitData;
   import mx.collections.ArrayCollection;
   
   [Bindable]
   public var sales:ArrayCollection = new ArrayCollection([
    {period: "Q1", toys: 900, electronics: 300, clothes: 400},
    {period: "Q2", toys: 200, electronics: 600, clothes: 450},
    {period: "Q3", toys: 500, electronics: 300, clothes: 200},
    {period: "Q4", toys: 800, electronics: 100, clothes: 300}
   ]);
   
   /**
    *
    */
   private function myDataTipFunction(hitData:HitData):String
   {
    var series:ColumnSeries = ColumnSeries(hitData.element);
    var item:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem);
    var quarter:Object = xAxis.formatForScreen(item.xValue);
    var total:Number = columnSet.positiveTotalsByAxis[item.xValue];
    var value:Number = Number(item.yValue) - Number(item.minValue);
    var percent:Number = Math.round(value / total * 1000) / 10; // want 2 decimal place precision
    return "In <b>" + quarter + "</b> there were <b>" + value + " "
     + series.displayName + "</b> units sold.<br/>This is <b>"
     + percent + "%</b> of the <b>" + total + " total</b> units sold in "
     + quarter + ".";
   }
  ]]>
 </mx:Script>
 
 <mx:ColumnChart
  dataProvider="{sales}"
  width="100%"
  height="100%"
  showDataTips="true"
  dataTipFunction="myDataTipFunction"
  >
  <mx:horizontalAxis>
   <mx:CategoryAxis id="xAxis" categoryField="period" />
  </mx:horizontalAxis>
  <mx:verticalAxis>
   <mx:LinearAxis id="yAxis" />
  </mx:verticalAxis>
  <mx:series>
   <slc:ColumnSet id="columnSet" type="stacked">
    <mx:ColumnSeries yField="toys" displayName="Toys" />
    <mx:ColumnSeries yField="electronics" displayName="Electronics" />
    <mx:ColumnSeries yField="clothes" displayName="Clothes" />
   </slc:ColumnSet>
  </mx:series>
 </mx:ColumnChart>
 
</mx:Application>

 

ColumnSet.as

package com.scottlogic.charts
{
    import flash.utils.Dictionary;
    import mx.charts.series.ColumnSet;
   
    /**
     * Extension to mx.charts.series.ColumnSet to expose the
     * stack totals for public use, e.g. in a data tip
     * function.
     */
    public class ColumnSet extends mx.charts.series.ColumnSet
                           implements IStackedSeries
    {
        /**
         * Constructor
         */
        public function ColumnSet()
        {
            super();
        }
       
        /**
         * @see IStackedSeries.positiveTotalsByAxis
         */
        public function get positiveTotalsByAxis():Dictionary
        {
            return posTotalsByPrimaryAxis;
        }
       
        /**
         * @see IStackedSeries.negativeTotalsByAxis
         */
        public function get negativeTotalsByAxis():Dictionary
        {
            return negTotalsByPrimaryAxis;
        }
       
        /**
         * @see IStackedSeries.stackMaximum
         */
        public function get stackMaximum():Number
        {
            return stackedMaximum;
        }
       
        /**
         * @see IStackedSeries.stackMinimum
         */
        public function get stackMinimum():Number
        {
            return stackedMinimum;
        }
    }
}