Flex ColumnChart verticalAxis 中的title在变换皮肤时的异常

在ColumnChart 中添加了title的显示，但在更新皮肤时，发现title 的位置会向左下方移动（仅在verticalAxisTitleAlignment="vertical"时）。

 

AxisRenderer 中的verticalAxisTitleAlignment有两值可供先用：flippedVertical 将title从上往下渲染；

   vertical 将title从下往上渲染。

部分代码如下：

 

<ColumnChart id="chart" width="100%" height="100%" dataProvider="{dataSet}" > <series> <ColumnSeries yField="v" /> </series> <verticalAxis> <LinearAxis id="linear" baseAtZero="{baz.selected}" autoAdjust="{aaj.selected}" title="Linear Title" /> </verticalAxis> <verticalAxisRenderers> <AxisRenderer axis="{linear}" verticalAxisTitleAlignment="vertical" titleRenderer="examples.ChartTitleRender" > </AxisRenderer> </verticalAxisRenderers> <horizontalAxis> <CategoryAxis categoryField="cat" ticksBetweenLabels="false"/> </horizontalAxis> </ColumnChart> 

 

Solution: 调式跟踪发现在ChartLabel 这个类中的updateDisplayList()方法中

 

if (parent && parent is AxisRenderer && parent.rotation == 90 && _label.embedFonts == true) { var p:AxisRenderer = AxisRenderer(parent); if ((p.getStyle('verticalAxisTitleAlignment') == 'vertical' && p.layoutDirection == LayoutDirection.LTR) || (p.getStyle('verticalAxisTitleAlignment') == 'flippedVertical' && p.layoutDirection == LayoutDirection.RTL)) { _label.rotation = 180; _label.y = _label.y + _label.height; _label.x = _label.x + _label.width; } } 

注：因为项目中用到了嵌入字体，所以label.embedFonts = true。

title会旋转180度，然后将x,y坐标相应的增加width和height。这样以来，每次调到该方法，title就会向左下方

移动了。

 

本想扩展ChartLabel时，发现该类中都是私有属性。只好使用titleRenderer来处理了。

 

<AxisRenderer axis="{linear}" verticalAxisTitleAlignment="vertical" titleRenderer="com.onestart.example.controls.ChartTitleRender" > </AxisRenderer> 

 

ChartTitleRenderer.as 如下：

package com.onestart.example.controls { import flash.display.*; import flash.geom.*; import mx.charts.AxisLabel; import mx.charts.AxisRenderer; import mx.core.FlexBitmap; import mx.core.IDataRenderer; import mx.core.IUITextField; import mx.core.LayoutDirection; import mx.core.UIComponent; import mx.core.UITextField; import mx.core.mx_internal; use namespace mx_internal; /** * Draws data labels on chart controls. * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ public class ChartTitleRenderer extends UIComponent implements IDataRenderer { //-------------------------------------------------------------------------- // // Class constants // //-------------------------------------------------------------------------- /** * @private */ private static var ORIGIN:Point = new Point(0, 0); /** * @private */ private static var X_UNIT:Point = new Point(1, 0); //-------------------------------------------------------------------------- // // Constructor // //-------------------------------------------------------------------------- /** * Constructor. * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ public function ChartTitleRenderer() { super(); this.includeInLayout = false; this.layoutDirection = LayoutDirection.LTR; } //-------------------------------------------------------------------------- // // Variables // //-------------------------------------------------------------------------- /** * @private */ private var _label:IUITextField; /** * @private */ private var _bitmap:Bitmap; /** * @private */ private var _capturedText:BitmapData; /** * @private */ private var _text:String; //-------------------------------------------------------------------------- // // Properties // //-------------------------------------------------------------------------- //---------------------------------- // data //---------------------------------- /** * @private */ private var _data:Object; [Inspectable(environment="none")] /** * Defines the contents of the label. * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ public function get data():Object { return _data; } /** * @private */ public function set data(value:Object):void { if (value == _data) return; _data = value; if (value is AxisLabel) _text = AxisLabel(value).text; else if (value is String) _text = String(value); _label.text = _text == null ? "":_text; invalidateSize(); invalidateDisplayList(); } //-------------------------------------------------------------------------- // // Overridden methods: UIComponent // //-------------------------------------------------------------------------- /** * @inheritDoc * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ override public function invalidateSize():void { super.invalidateSize(); } /** * @inheritDoc * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ override protected function createChildren():void { super.createChildren(); _label = IUITextField(createInFontContext(UITextField)); _label.multiline = true; _label.selectable = false; _label.autoSize = "left"; _label.styleName = this; addChild(DisplayObject(_label)); } /** * @inheritDoc * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ override protected function measure():void { var oldRotation:Number = rotation; if (parent && parent.rotation == 90) rotation = -90; _label.validateNow(); if (_label.embedFonts) { measuredWidth = _label.measuredWidth + 6; measuredHeight = _label.measuredHeight + UITextField.TEXT_HEIGHT_PADDING; } else { measuredWidth = _label.textWidth + 6; measuredHeight = _label.textHeight + UITextField.TEXT_HEIGHT_PADDING; } rotation = oldRotation; } /** * @inheritDoc * * @langversion 3.0 * @playerversion Flash 9 * @playerversion AIR 1.1 * @productversion Flex 3 */ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { if (parent && parent is AxisRenderer && parent.rotation == 90 && _label.embedFonts == true) { var p:AxisRenderer = AxisRenderer(parent); if ((p.getStyle('verticalAxisTitleAlignment') == 'vertical' && p.layoutDirection == LayoutDirection.LTR) || (p.getStyle('verticalAxisTitleAlignment') == 'flippedVertical' && p.layoutDirection == LayoutDirection.RTL)) { _label.rotation = 180; _label.y = _label.height ; _label.x = _label.width; } } _label.validateNow(); _label.setActualSize(unscaledWidth, unscaledHeight); var localX:Point; var localO:Point; var useLabel:Boolean = true; if (_label.embedFonts == false && unscaledWidth > 0 && unscaledHeight > 0) { localX = globalToLocal(X_UNIT); localO = globalToLocal(ORIGIN); useLabel = localX.x - localO.x == 1 && localX.y - localO.y == 0; } if (useLabel) { if (_bitmap) { removeChild(_bitmap); _bitmap = null; } _label.visible = true; } else { _label.visible = false; if (!_capturedText || _capturedText.width != unscaledWidth || _capturedText.height != unscaledHeight) { _capturedText = new BitmapData(unscaledWidth, unscaledHeight); if (_bitmap) { removeChild(_bitmap); _bitmap = null; } } if (!_bitmap) { _bitmap = new FlexBitmap(_capturedText); _bitmap.smoothing = true; addChild(_bitmap); } _capturedText.fillRect( new Rectangle(0, 0, unscaledWidth, unscaledHeight), 0); _capturedText.draw(_label); if (parent && parent.rotation == 90 && parent is AxisRenderer) { p = AxisRenderer(parent); if((p.getStyle('verticalAxisTitleAlignment')=="vertical" && p.layoutDirection == LayoutDirection.LTR) || (p.getStyle('verticalAxisTitleAlignment') == 'flippedVertical' && p.layoutDirection == LayoutDirection.RTL)) { _bitmap.rotation = 180; _bitmap.y = _label.x + _bitmap.height; _bitmap.x = _label.y + _bitmap.width; } } } } } }  

 

其实ChartTitleRenderer.as 是copy了官方的ChartLabel.as ，将其中的代码改了一点。