`
hgfghw6
  • 浏览: 45379 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

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

 
阅读更多

  在ColumnChart 中添加了title的显示,但在更新皮肤时,发现title 的位置会向左下方移动(仅在verticalAxisTitleAlignment="vertical"时)。 AxisRenderer 中的verticalAxisTitleAlignment有两值可供先用:flippedVertical 将title从上往下渲染;    vertical 将title从下往上渲染。 部分代码如下: width="100%" height="100%" dataProvider="{dataSet}" >                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来处理了。    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')=="ver tical" && 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 ,将其中的代码改了一点。
分享到:
评论

相关推荐

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,广泛应用于数据分析和展示。 1. **饼形图(PieChart)** 饼形图用于显示部分与整体之间...

    关于flex中chart的效果例子

    在Flex中,我们可以使用`mx.charts.ColumnChart`类来创建柱状图。这个类提供了丰富的自定义选项,包括颜色、样式、动画效果等,以满足各种需求。 首先,我们来看`library.swf`文件。这是一个包含预编译的Flex组件库...

    Flex股票分析图

    在Flex中,我们可以使用`mx.charts`包中的`LineChart`或`ColumnChart`组件来绘制股票分析图。这些组件支持数据绑定,可以直接与数据源连接,动态更新图表内容。 四、数据源准备 为了绘制股票分析图,我们需要准备...

    flex 移动折线图

    在Flex编程中,移动折线图是一种常见的交互功能,它允许用户通过拖动来查看数据的不同部分,这对于处理大量数据或者需要动态分析趋势的应用来说非常有用。本篇将深入探讨如何在Flex中实现线图的左右移动,以及...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    Flex中的mx.charts.ColumnChart类可以实现这一功能,同样通过dataProvider设置数据源,设置columnWidthRatio调整每个柱子的宽度,以及使用horizontalAxis和verticalAxis定义横纵坐标轴。 饼图适用于展示各部分占...

    flex graph

    Flex Graph是一种基于Adobe Flex技术的图形绘制库,用于在Web应用程序中创建交互式的图表和图形。Flex是ActionScript 3.0的一个框架,主要用于构建富互联网应用(RIA)。本篇文章将深入探讨Flex Graph的基本概念、...

    Flex4中使用组件添加柱状图、饼状图等图表

    根据提供的文件信息,本文将详细介绍如何在Flex4中利用组件添加柱状图、饼状图等图表,并通过示例代码具体展示实现过程。 ### 一、Flex4中的柱状图 #### 1.1 柱状图简介 在Flex4中,柱状图是一种非常常见的数据...

    flex各种图表的实现

    在Flex中,你可以通过调整`ColumnChart`的`orientation`属性来实现从条状图到柱状图的转换。`vertical`表示柱状图,而`horizontal`则表示条状图。 过渡效果是提升图表视觉吸引力的重要手段。`effectChartDemo.mxml`...

    flex 统计,柱状图,饼图。

    在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...

    Flex画 坐标轴曲线 项目用过的 flex4 开发

    在Flex4开发中,创建坐标轴曲线图是一种常见的需求,特别是在数据可视化和图表展示的应用中。Flex是一个基于ActionScript和MXML的开放源代码框架,主要用于构建富互联网应用程序(RIA)。它提供了强大的图形和组件库...

    flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法

    在Flex中,我们可以使用`mx.charts.ColumnChart`类来创建柱状图。柱状图是一种常见的数据可视化工具,用于比较不同类别的数值。要设置柱状图,我们需要提供数据源,定义X轴和Y轴的数据字段,并根据需要配置其他样式...

    flex多曲线图,实时更新

    在IT行业中,Flex是一种基于ActionScript 3.0和Flash Player的开源框架,用于构建富互联网应用程序(RIA)。本文将详细探讨如何使用Flex创建多曲线图,并实现实时更新功能。 一、Flex概述 Flex是Adobe开发的一个...

    flex统计图标实例,饼状图,柱状图,折线图

    在本压缩包文件"Charts"中,我们聚焦于Flex中的统计图表功能,包括饼状图、柱状图和折线图的实例。这些图表是数据可视化的重要工具,帮助用户直观地理解复杂的数据信息。 饼状图在统计学中被广泛用于显示部分与整体...

    flex动态生成datagrid表头

    在Flex开发中,数据网格(DataGrid)是一种常用的组件,用于显示二维表格数据。它能够灵活地处理大量数据,并提供排序、筛选等多种功能。而动态生成DataGrid表头则是在运行时根据数据源来创建列,这在处理未知数量或...

    Flex chart line 线性表(单线和双线)

    在Flex中,我们可以使用`mx.charts.LineChart`类来创建这样的图表。下面将详细介绍如何使用Flex 4.5创建单线和双线线性图表。 首先,我们需要导入必要的库和组件。在Flex项目中,添加以下代码到你的MXML文件的`...

    Flex 开发的泡泡图

    在Flex中,泡泡图的实现通常基于Adobe Flex SDK,这是一个开源框架,用于构建富互联网应用程序(RIA)。Flex提供了强大的图形组件库,其中包括各种图表类型,如条形图、饼图和线图,当然也包括泡泡图。开发者可以...

    ArcGIS教程:Flex制作直观的交互式图表

    而序列则指定数据源中哪些数据会在图表上显示,并设定数据走势、填充和皮肤。例如,一个图表可能对应一个图表控件类和一个或多个图表序列类。Flex还提供了多种类型的坐标轴,如CategoryAxis(分类轴)、LinearAxis...

    flex radar图

    Flex雷达图是一种在ActionScript和Flex开发中广泛使用的数据可视化工具,主要用于展示多维度的数据,尤其是在比较不同数据项之间的相对表现时。它以其独特的星形或多边形布局,有效地展现了每个数据点在各个维度上的...

    Flex动态创建多个曲线图和柱形图源码

    在本例中,我们将探讨如何利用Flex来动态地创建多个曲线图和柱形图。此段代码摘自一个更完整的统计图表项目,并通过手动编写的数据源来展示图表的生成过程。下面将对代码进行详细的分析和解释。 #### 关键概念与...

    Flex实现双轴组合图的设计思路及代码

    在Flex中实现双轴组合图的设计思路和代码涉及到多个知识点,以下将详细介绍: 1. Flex基础:Flex是一种用于开发富互联网应用的开发环境,它包括一个编译器和一套语言规范。Flex使用MXML(基于XML的标记语言)和...

Global site tag (gtag.js) - Google Analytics