Flex实现ColumnChart柱图为圆角矩形并在柱子上方显示数值的itemRenderer

自己写的itemRenderer，实现柱图为圆角矩形。并且根据值的最大最小值用不同的颜色显示在每个柱子的上方

 ActionScript/Flex 代码

package  itemRender{import flash.display.Graphics;import flash.geom.Rectangle;import mx.charts.ChartItem;import mx.charts.chartClasses.GraphicsUtilities;import mx.charts.series.ColumnSeries;import mx.charts.series.items.ColumnSeriesItem;import mx.collections.ArrayCollection;import mx.controls.Text;import mx.core.IDataRenderer;import mx.core.UIComponent;import mx.graphics.IFill;import mx.graphics.IStroke;import mx.graphics.SolidColor;import mx.styles.StyleManager;import mx.utils.ColorUtil;          public class MyCol extends UIComponent implements IDataRenderer      {  private var _data:Object;private var l:Text ;[Inspectable(environment="none")]   /** *  The chartItem that this itemRenderer is displaying. *  This value is assigned by the owning series */public function get data():Object{return _data;}        protected function get showOtherLabel():Boolean{        return true;        }private function getMMvalue(arr:ArrayCollection,yField:String):Array{var max:Number=Number.NEGATIVE_INFINITY;var min:Number=Number.POSITIVE_INFINITY;for each(var obj:Object in arr){if(!isNaN(Number(obj[yField]))){max = Math.max(max,Number(obj[yField]));min = Math.min(min,Number(obj[yField]));}}return [max,min];}protected function get colors():Array{return ["#008654","#d80000","#B600CC"];}private function getColor(max:Boolean=false,min:Boolean=false):String{var c:String= colors[0];if(max)c= colors[1];else if(min)c= colors[2];return c;}/** *  @private */public function set data(value:Object):void{if (_data == value)return;_data = value;if(value is ColumnSeriesItem){if(l&&this.contains(l))this.removeChild(l);var csi:ColumnSeriesItem = ColumnSeriesItem(_data);var cs:ColumnSeries = ColumnSeries(csi.element);var arr:ArrayCollection = cs.dataProvider as ArrayCollection;var m:Array=getMMvalue(arr,cs.yField);var max:Boolean = Number(csi.yValue)==m[0];var min:Boolean = Number(csi.yValue)==m[1];if(max||min||(arr.length<13&&showOtherLabel)){l= new Text();if(max||min)l.setStyle("fontWeight","bold");this.addChild(l);if((value as ColumnSeriesItem).yValue)l.text= (value as ColumnSeriesItem).yValue.toString();//data label 标签会截掉最后一位，临时处理l.setStyle("color",getColor(max,min));l.setStyle("fontSize","14");}}}//--------------------------------------------------------------------------    //    //  Overridden methods    //    //--------------------------------------------------------------------------/** *  @private */override protected function updateDisplayList(unscaledWidth:Number,  unscaledHeight:Number):void{var fill:IFill;var state:String = "";if(_data is ChartItem && _data.hasOwnProperty('fill')){state = _data.currentState;fill = _data.fill;} else fill = GraphicsUtilities.fillFromStyle(getStyle('fill'));var color:uint;var adjustedRadius:Number = 0;switch(state){case ChartItem.FOCUSED:case ChartItem.ROLLOVER:if(StyleManager.isValidStyleValue(getStyle('itemRollOverColor')))color = getStyle('itemRollOverColor');elsecolor = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-20);fill = new SolidColor(color);adjustedRadius = getStyle('adjustedRadius');if(!adjustedRadius)adjustedRadius = 0;break;case ChartItem.DISABLED:if(StyleManager.isValidStyleValue(getStyle('itemDisabledColor')))color = getStyle('itemDisabledColor');elsecolor = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),20);fill = new SolidColor(GraphicsUtilities.colorFromFill(color));break;case ChartItem.FOCUSEDSELECTED:case ChartItem.SELECTED:if(StyleManager.isValidStyleValue(getStyle('itemSelectionColor')))color = getStyle('itemSelectionColor');elsecolor = ColorUtil.adjustBrightness2(GraphicsUtilities.colorFromFill(fill),-30);fill = new SolidColor(color);adjustedRadius = getStyle('adjustedRadius');if(!adjustedRadius)adjustedRadius = 0;break;}var stroke:IStroke = getStyle("stroke");var w:Number = stroke ? stroke.weight / 2 : 0;var rc:Rectangle = new Rectangle(w - adjustedRadius, w - adjustedRadius, width - 2 * w + adjustedRadius * 2, height - 2 * w + adjustedRadius * 2);var g:Graphics = graphics;g.clear();g.moveTo(rc.left,rc.top);if (stroke)stroke.apply(g);if (fill)fill.begin(g,rc);//圆角矩形g.drawRoundRect(w - adjustedRadius, w - adjustedRadius, width - 2 * w + adjustedRadius * 2, height - 2 * w + adjustedRadius * 2,15);//g.lineTo(rc.right,rc.top);//g.lineTo(rc.right,rc.bottom);//g.lineTo(rc.left,rc.bottom);//g.lineTo(rc.left,rc.top);if (fill)fill.end(g);if(l){l.setActualSize(l.textWidth+25,l.textHeight);l.move(-9,0-l.height);}}              }  }

 

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"><mx:Script><![CDATA[import mx.collections.ArrayCollection;[Bindable]private var demoArr:ArrayCollection=new ArrayCollection([{orgName:'杭州',amt:3654},{orgName:'嘉兴',amt:2000},{orgName:'绍兴',amt:1000},{orgName:'金华',amt:1200},{orgName:'宁波',amt:1800},{orgName:'台州',amt:560},{orgName:'丽水',amt:2300},{orgName:'湖州',amt:2900},{orgName:'衢州',amt:2600},{orgName:'温州',amt:1600},{orgName:'舟山',amt:1300}])]]></mx:Script><mx:SeriesInterpolate id="seriesInterpolate" duration="1000" /><mx:WipeRight id="wipeOut" duration="4000"/><mx:WipeRight id="wipeIn" duration="4000"/><mx:Stroke id="axisStroke" alpha="0.0"></mx:Stroke><mx:Stroke id="a" weight="3" color="#92c5c6" alpha=".9"/><mx:Zoom id="zoomOut" duration="800"/><mx:SeriesSlide id="seriesSlide" duration="1000" direction="up"/><mx:VBox width="100%" height="100%" backgroundColor="white" fontSize="12" horizontalAlign="center"><mx:ColumnChart id="columnChart"  dataProvider="{this.demoArr}" width="100%" height="100%"><mx:backgroundElements><mx:GridLines id="gridLines"  direction="both"   horizontalTickAligned="false"  verticalTickAligned="false"><mx:verticalStroke><mx:Stroke color="0xa6cecd"   weight="30"   alpha="0.4"/></mx:verticalStroke><mx:horizontalStroke><mx:Stroke color="0xa6cecd"   weight="0.6"   alpha="1"/></mx:horizontalStroke></mx:GridLines></mx:backgroundElements><mx:verticalAxisRenderers><mx:AxisRenderer axis="{va1}" tickLength="0" showLine="false" axisStroke="{a}"/></mx:verticalAxisRenderers><mx:horizontalAxis><mx:CategoryAxis categoryField="orgName" id="ca1"></mx:CategoryAxis></mx:horizontalAxis><mx:horizontalAxisRenderers><mx:AxisRenderer axis="{ca1}" tickLength="0" showLine="true" axisStroke="{a}"/></mx:horizontalAxisRenderers><mx:series><mx:ColumnSet type="clustered"><mx:ColumnSeries id="co2" itemRenderer="itemRender.MyCol" maxColumnWidth="15" yField="amt" xField="orgName"  showEffect="{wipeOut}" hideEffect="{wipeIn}" showDataEffect="{seriesInterpolate}"><mx:verticalAxis><mx:LinearAxis baseAtZero="true"   id="va1"/></mx:verticalAxis><mx:fill><mx:LinearGradient id="linearGradient1"><mx:entries><mx:Array><mx:GradientEntry color="0x004fcc"  ratio="0.0"  alpha="1.0"/><mx:GradientEntry color="0x0189ff"  ratio="1.0"  alpha="1.0"/></mx:Array></mx:entries></mx:LinearGradient></mx:fill></mx:ColumnSeries></mx:ColumnSet></mx:series><mx:seriesFilters><mx:Array/></mx:seriesFilters></mx:ColumnChart></mx:VBox></mx:Application>

如图：