Flex chart 改变图表元素的颜色

阅读更多

Flex 有许许多多的chart组件，他们的父类都是ChartBase。ChartBase下面有两个直接子类：CartesianChart 和 PolarChart。除了PieChart 继承自PolarChart外，其他的chart图形都继承自CartesianChart。因此如果像改变图表元素的颜色的话，就需要对这两种类型的chart做不同的处理。

在下面的例子里，我们在lengend 做一下定制来得到我们想要的结果。

主程序：

 

 CartesianLegendItem:

package com.skin
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.charts.LegendItem;
	import mx.charts.chartClasses.ChartElement;
	import mx.charts.chartClasses.GraphicsUtilities;
	import mx.charts.chartClasses.StackedSeries;
	import mx.charts.renderers.BoxItemRenderer;
	import mx.charts.series.ColumnSeries;
	import mx.charts.series.LineSeries;
	import mx.charts.series.PieSeries;
	import mx.controls.ColorPicker;
	import mx.core.IDataRenderer;
	import mx.core.IFlexDisplayObject;
	import mx.core.IInvalidating;
	import mx.core.UIComponent;
	import mx.events.DropdownEvent;
	import mx.graphics.IFill;
	import mx.graphics.SolidColor;
	import mx.graphics.SolidColorStroke;
	import mx.graphics.Stroke;
	import mx.skins.ProgrammaticSkin;
	import mx.utils.ColorUtil;
	
	public class CartesianLegendItem extends LegendItem {
		public function CartesianLegendItem() {
			super();
			this.buttonMode = true;
			this.mouseChildren = false;
			this.addEventListener(MouseEvent.CLICK,selecteLegend,false,0,true);

		}
		
		private function selecteLegend(e:MouseEvent):void
		{
			if(e.target is LegendItem)
			{
				var cp:ColorPicker = new ColorPicker();
				this.addChild(cp);
				cp.selectedColor = (element as UIComponent).getStyle("fill").color;//element 负责生成此图例项目的图表元素。
				cp.addEventListener(DropdownEvent.CLOSE, changeItemColor,false,0,true);
				cp.x = e.localX;
				cp.y = e.localY;
				cp.width = 0;
				cp.height = 0;
				cp.open();
			}
		}
		
		private function changeItemColor(e:DropdownEvent):void 
		{
			var solidColor:SolidColor = (element as UIComponent).getStyle("fill") as SolidColor;				
			if (solidColor != null)
			{
				solidColor.color = e.target.selectedColor;
			}
			(element as UIComponent).setStyle("fill",solidColor);
			var stroke:SolidColorStroke = (element as UIComponent).getStyle("stroke");
			if (stroke != null)
			{
				stroke.color = e.target.selectedColor;					
			}
			(element as UIComponent).setStyle("stroke",stroke);
			e.target.removeEventListener(DropdownEvent.CLOSE, changeItemColor,false);
			this.removeChild(e.target as DisplayObject);
			(this.marker as IInvalidating).invalidateDisplayList();
			(element as UIComponent).invalidateDisplayList();
			this.invalidateDisplayList();
		}
	}
}

 PolarLegendItem:

package com.skin
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.charts.LegendItem;
	import mx.charts.chartClasses.ChartElement;
	import mx.charts.chartClasses.GraphicsUtilities;
	import mx.charts.chartClasses.StackedSeries;
	import mx.charts.renderers.BoxItemRenderer;
	import mx.charts.series.ColumnSeries;
	import mx.charts.series.LineSeries;
	import mx.charts.series.PieSeries;
	import mx.controls.ColorPicker;
	import mx.core.IDataRenderer;
	import mx.core.IFlexDisplayObject;
	import mx.core.IInvalidating;
	import mx.core.UIComponent;
	import mx.events.DropdownEvent;
	import mx.graphics.IFill;
	import mx.graphics.SolidColor;
	import mx.graphics.SolidColorStroke;
	import mx.graphics.Stroke;
	import mx.skins.ProgrammaticSkin;
	import mx.utils.ColorUtil;
	
	public class PolarLegendItem extends LegendItem {
		public function PolarLegendItem() {
			super();
			this.buttonMode = true;
			this.mouseChildren = false;
			this.addEventListener(MouseEvent.CLICK,selecteLegend,false,0,true);
		}

		private function selecteLegend(e:MouseEvent):void
		{
			if(e.target is LegendItem)
			{
				var cp:ColorPicker = new ColorPicker();
				this.addChild(cp);
				cp.selectedColor =  (marker as IDataRenderer).data.fill.color;
				/*marker 此图例项目所显示的标记。因为对于PieChart来说，chart中每一块其实是一个PieSeries生产的，所以如果你
				用element来取值的话，你会发现每次element都是同样的。
				*/
				cp.addEventListener(DropdownEvent.CLOSE, changeItemColor,false,0,true);
				cp.x = e.localX;
				cp.y = e.localY;
				cp.width = 0;
				cp.height = 0;
				cp.open();
			}
		}
		
		private function changeItemColor(e:DropdownEvent):void 
		{		
				var solidColor:SolidColor = (marker as IDataRenderer).data.fill as SolidColor;				
				if (solidColor != null)
				{
					solidColor.color = e.target.selectedColor;
				}
				e.target.removeEventListener(DropdownEvent.CLOSE, changeItemColor,false);
				this.removeChild(e.target as DisplayObject);
				(marker as IInvalidating).invalidateDisplayList();
				(element as IInvalidating).invalidateDisplayList();
				this.invalidateDisplayList();
			}
	}
}