Flex中实现带有时间轴的直方图

Flex中的直方图的X轴就是一个显示label的一个轴，无法进行交互，如何实现带有时间轴的直方图，并且每个时间刻度点都可以进行交互呢？其实很简单，自定义一个简单的类重写时间轴，具体就是实现IAxisRenderer接口。

先上个图：

1、首先创建一个类，继承自UIComponent,用来重写X轴的Renderer:

public class SimpleAxisRenderer extends UIComponent implements IAxisRenderer

2、在构造函数中将表示时间刻度点的图片加入到组件中，同时将点击刻度点高亮显示的橘色大圆点单独加入到组件中，并注册相应的点击事件：

public function SimpleAxisRenderer()
{
	//将代表时间轴刻度的图片添加到轴上......
	addImage();
	//选中状态的图片
	myImage.source="assets/images/slect.png";
	myImage.buttonMode=true;
	myImage.useHandCursor=true;
			myImage.addEventListener(MouseEvent.CLICK,myImage_click_handler);
	addChild(myImage);
}

3、在构造函数中添加完图片后，需要对图片进行布局定位，使之按照时间轴来显示：

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{	//…………
	for (var i:int = 0;i<_labels.length;i++)
	{
		var l:Label = _labels[i];
		var ld:AxisLabel = _labelData.labels[i];
		var left:Number = axisLen * ld.position-3.5;
		
		var img:IDBImage=_images[i];
		img.move(left,unscaledHeight+5);			  			img.setActualSize(img.measuredWidth,img.measuredHeight);
					
		l.move(left-5,unscaledHeight+AXIS_SIZE+15);
		l.setActualSize(l.measuredWidth,AXIS_SIZE);
		
		if(i==_index)
		{
			setMyImageXY(img);
		}			
	}
}

4、这样就把时间刻度点图片显示在正确的位置了。时间轴渲染类就编写完成了，就可以在直方图中使用了：

<mx:horizontalAxisRenderers>
	<renderer:SimpleAxisRenderer axis="{caYear}"  id="sar" 				ImageClickFunction="{axis_click_handler}"/>	
</mx:horizontalAxisRenderers>

通过以上步骤就实现了上图的带有时间轴的直方图，同时直方图的时间轴还可以与外部进行交互，比如我的图片中显示的就是与地图交互，在地图上显示那年举办奥运会的城市及相关信息。

这样看起来实现直方图的时间轴是不是很简单！

点击获取源代码