Flex 有许许多多的chart组件，他们的父类都是ChartBase。ChartBase下面有两个直接子类：CartesianChart 和 PolarChart。除了PieChart 继承自PolarChart外，其他的chart图形都继承自CartesianChart。因此如果像改变图表元素的颜色的话，就需要对这两种类型的chart做不同的处理。
在下面的例子里，我们在lengend 做一下定制来得到我们想要的结果。
主程序：
?
<?xml version="1.0"?>
<!-- Simple example to demonstrate the PieChart control. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.charts.HitData;
import mx.charts.series.PieSeries;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
[Bindable]
private var medalsAC:ArrayCollection = new ArrayCollection( [
{ Country: "USA",Gold: 35,Silver:39,Bronze: 29 },{ Country: "China",Gold: 32,Silver:17,Bronze: 14 },{ Country: "Russia",Gold: 27,Silver:27,Bronze: 38 } ]);
private function dataTipFunction(hitData:HitData):String
{
var temp:String= (" " + (hitData.chartItem as PieSeriesItem).percentValue).substr(0,6);
//对于PieChart来说，PieSeriesItem有一个percentValue的值来标记百分比
return hitData.item[(hitData.element as PieSeries).nameField] + "(" + temp + "%)";
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:VDividedBox width="100%" height="100%">
<mx:Panel title="Pie Chart" height="100%" width="100%">
<mx:PieChart id="chart"
height="100%"
width="100%"
paddingRight="5"
paddingLeft="5"
showDataTips="true"
dataTipFunction="dataTipFunction"
dataProvider="{medalsAC}">
<mx:series>
<mx:PieSeries
nameField="Country"
labelPosition="callout"
field="Silver">
<mx:filters>
<fx:Array/>
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{chart}" legendItemClass="com.skin.PolarLegendItem"/>
</mx:Panel>
<mx:Panel title="Column Chart" height="100%" width="100%">
<mx:ColumnChart id="column"
height="100%"
width="45%"
paddingLeft="5"
paddingRight="5"
showDataTips="true"
dataProvider="{medalsAC}"
>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Country"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries
xField="Country"
yField="Gold"
displayName="Gold"
/>
<mx:ColumnSeries
xField="Country"
yField="Silver"
displayName="Silver"
/>
<mx:ColumnSeries
xField="Country"
yField="Bronze"
displayName="Bronze"
/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}" legendItemClass="com.skin.CartesianLegendItem"/>
</mx:Panel>
</mx:VDividedBox>
</s:Application>
?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,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,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,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,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,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,false);
this.removeChild(e.target as DisplayObject);
(marker as IInvalidating).invalidateDisplayList();
(element as IInvalidating).invalidateDisplayList();
this.invalidateDisplayList();
}
}
}