Linechart使用中的细节(3)

3、关于自定义ItemRenderer

个人觉得即使Flex不开源，现有的功能就很大程度的能够满足自定义的需求。对于通过数据绑定实现的控件(List，DataGrid，Chart)，每一行数据的呈现都可以自定义——自定义样式，自定义行为。对于LineChart中，默认的状况是用圆点描述每个数据，然后连起来，鼠标经过圆点时显示点上横纵座标的值。自定义的需求就有许多，比如不需要鼠标经过就显示点上的值，比如使用其它形状的点标示数据，比如用不同的颜色标示每个点，等等，其实都是一些定义ItemRenderer样式的问题。

举个例子：比如实现默认在点上标记某个数据，不需要鼠标经过，这个可以通过将ItemRenderer设置成一个Label来实现。这个Label首先要继承UIComponent，如果要实现显示该点上的数据的话就要实现 IDataRenderer 来获取。它的表现样式是通过重写updateDisplayList方法实现的。

as 代码

import mx.charts.ChartItem;
import mx.core.IDataRenderer;
import mx.controls.Label;
import mx.core.UIComponent;
import mx.charts.series.LineSeries;
import mx.charts.series.items.LineSeriesItem;
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.core.IDataRenderer;
import mx.graphics.IFill;
import mx.graphics.IStroke;
import mx.skins.ProgrammaticSkin;
import mx.controls.Label;
import mx.core.UIComponent;

public class MyLabel extends UIComponent implements IDataRenderer
{
    private var _label:Label;

    public function MyLabel():void
    {
        super();
        _label = new Label();
        addChild(_label);
        _label.setStyle("color",0x999999);
        _label.setStyle("paddingTop",4);
    }
    private var _chartItem:ChartItem;

    public function get data():Object
    {
        return _chartItem;
    }

    public function set data(value:Object):void
    {
        if (_chartItem == value)
            return;
        _chartItem = ChartItem(value);

        if(_chartItem != null)
            _label.text = LineSeriesItem(_chartItem).yValue.toString();
    }

    override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        _label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight());
    }

}

当然也可以将ItemRenderer设置成其它空间，在Chart中常用的会是CircleItemRenderer（圆点）等等。对不同的点的现实不同效果可以通过将逻辑写到自定义的ItemRenderer里实现。