flex 自定义tooltip

最新推荐文章于 2022-01-19 16:49:32 发布

转载最新推荐文章于 2022-01-19 16:49:32 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wshsdlau/p/3466283.html

本文介绍如何使用Flex框架创建柱状图，并通过自定义数据提示函数实现详细且友好的数据展示。通过绑定数据集和利用ColumnSet类扩展，实现每个季度销售数据的精确显示，包括各品类销售单位数及占总销售额的百分比。

//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 " + quarter + " there were " + value + " "
 + series.displayName + " units sold. This is "
 + percent + "% of the " + total + " total 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;
        }
    }
}

转载于:https://www.cnblogs.com/wshsdlau/p/3466283.html