Flex Chart有些总结

原创于 2014-06-16 16:20:26 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Flex4 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用Flex构建自定义AreaChart图表，包括设置纵轴样式、定义数据项渲染器及配置图表系列等关键技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AreaChart 图表的效果如下图：

为了达到如下效果：

需要对verticalAxisRenderers纵轴进行渲染，AreaSeries的itemRenderer进行数据项加载.

代码如下:

主程序代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application ... >
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var bookSales:ArrayCollection= new ArrayCollection(
            [{bookType:"Fiction",Sales:103},
            {bookType:"Nonfiction",Sales:69},
            {bookType:"Technology",Sales:78},
            {bookType:"Self-Help",Sales:124}]
            );
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <!-- 线条颜色，以及填充色 -->     
        <s:SolidColorStroke id="aAxisStroke" weight="1" color="#BBCCDD" />
        <s:SolidColorStroke id="aTickStroke" weight="1" color="#BBCCDD" />
        
        <s:SolidColor id="areaSC" color="#71747C" alpha="0.8"  />
        <s:SolidColorStroke id="areaStroke" color="#FFFFFF" alpha="0.8" weight="1" />
    </fx:Declarations>
    
    <s:Group width="40%" height="40%" >
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:fill>
                <s:SolidColor color="#61656E" />
            </s:fill>
        </s:Rect>
        
        <mx:AreaChart id="areaChart" width="100%" height="100%" dataProvider="{bookSales}">
            <!-- 横轴 -->
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="bookType" />
            </mx:horizontalAxis>

            <!-- 纵轴 -->            
            <mx:verticalAxis>
                <mx:LinearAxis id="vLinearAxis" minimum="50" maximum="150" />
            </mx:verticalAxis>

            <!-- 对纵轴进行渲染,例如刻度颜色与宽度，纵轴的颜色与宽度 -->            
            <mx:verticalAxisRenderers>
                <mx:AxisRenderer axis="{vLinearAxis}" 
                                 tickStroke="{aTickStroke}" axisStroke="{aAxisStroke}" 
                                 tickLength="3" tickPlacement="cross"/>
            </mx:verticalAxisRenderers>
            
            <mx:series> 
                <!-- 定义图表数据的 Series 对象数组,xField,yField -->
                <mx:AreaSeries xField="bookType" yField="Sales" form="segment" 
                               areaFill="{areaSC}" areaStroke="{areaStroke}"
                               itemRenderer="AsPackages.AreaRenderer"/>
                <!-- itemRenderer 对每项数据加载的定义 -->
            </mx:series>
        </mx:AreaChart>
    </s:Group>
</s:Application>

AreaRenderer.as

package AsPackages
{
    import flash.display.Graphics;
    import flash.display.Sprite;
    import flash.geom.Matrix;
    import flash.geom.Rectangle;
    
    import mx.charts.Legend;
    import mx.charts.chartClasses.LegendData;
    import mx.charts.series.LineSeries;
    import mx.charts.series.items.AreaSeriesItem;
    import mx.charts.series.items.LineSeriesItem;
    import mx.controls.Label;
    import mx.core.IDataRenderer;
    import mx.core.UIComponent;
    import mx.graphics.SolidColor;
    import mx.graphics.SolidColorStroke;
    
    import spark.primitives.Graphic;

    public class AreaRenderer extends UIComponent implements IDataRenderer
    {
        private var _label:Label;
        private var _yField:String;
        
        private var _chartItem:AreaSeriesItem;
        
        public function AreaRenderer():void
        {
            super();
            _label=new Label();
            addChild(_label);
        }
        
        public function get data():Object
        {
            return _chartItem;
        }
        
        public function set data(value:Object):void{
            if(_chartItem==value)
                return;
            if(value is AreaSeriesItem)
            {
                _chartItem=AreaSeriesItem(value);
                _label.text=_chartItem.yValue.toString();
                _label.setStyle("color",0xFFFFFF);
                _label.setStyle("fontSize",12);

            }
        }
        
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            var rc:Rectangle=new Rectangle(0,0,width,height);
            
            var point:Graphics=graphics;
            point.clear();
            point.moveTo(rc.left,rc.top);
            point.beginFill(0xFFFFFF);
            point.drawCircle(5,5,4);
            point.endFill();
            
            _label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight());
            _label.move(unscaledWidth-10,unscaledHeight-25);
        
        }
    }
}