自定义图表刻度标签
Flex为我们提供了一套非常强大的图表组件，而且这些组件给我们开发人员提供了丰富的接口，在此基础上可以扩展出更加令人兴奋的应用。
下面是我扩展的AxisRenderer类，AxisRenderer是图表轴渲染器，所有图表的轴都是通过这个类来渲染的。而我这个例子所做就是在AxisRenderer的基础上提供几个接口(以Style方式)，这几个接口的作用是给轴的刻度标签加上格式、前/后缀、千位符、单位。
AxisRendererPlus继承自mx.charts.AxisRenderer
package org.beasy.charts { import mx.charts.AxisRenderer; import mx.charts.LinearAxis; import mx.charts.chartClasses.IAxisRenderer; import mx.formatters.NumberFormatter; /** * 是否显示千位符 * * @default false */ [Style(name="useThousandsSeparator", type="Boolean", inherit="no")] /** * 保留小数点位数 * * @default 0 */ [Style(name="precision", type="int", format="Length", inherit="no")] /** * 前缀 * * @param null */ [Style(name="prefix", type="String", inherit="no")] /** * 后缀 * *@default null */ [Style(name="suffix", type="String", inherit="no")] /** * 货币单位 * * @param value */ [Style(name="moneyUnit", type="com.beasy.charts.MoneyUnits", inherit="no")] /** * 扩展过的AxisRendererPlus * 支持定义标签格式: * 1,支持千们符 * 2,小数点保留位数 * 3,前缀 * 4,后缀 * 5,大数字单位缩写 * * @author Marco */ public class AxisRendererPlus extends AxisRenderer { //-------------------------------------------------------------------------- // // Constructor // //-------------------------------------------------------------------------- public function AxisRendererPlus() { super(); labelFunction = myLabelFunction; numberFmt = new NumberFormatter(); } //-------------------------------------------------------------------------- // // Variables // //-------------------------------------------------------------------------- /** * @private */ private var numberFmt:NumberFormatter; //-------------------------------------------------------------------------- // // Methods // //-------------------------------------------------------------------------- /** * @private * * 根据设定的样式值在labelFunction中转换显示的标签. */ public function myLabelFunction(axisRenderer:IAxisRenderer, label:String):String { var useThousandsSeparator:Boolean = getStyle("useThousandsSeparator"); var precision:int = getStyle("precision"); var prefix:String = getStyle("prefix"); var suffix:String = getStyle("suffix"); var moneyUnit:MoneyUnits = getStyle("moneyUnit"); if( axisRenderer.axis is LinearAxis ) { var num:Number = Number( label ); if( moneyUnit ) num = MoneyUnits.formatByUnit(moneyUnit.unit, num); numberFmt.precision = precision; numberFmt.useThousandsSeparator = useThousandsSeparator; label = numberFmt.format(num); if( prefix ) label = prefix+label; if( moneyUnit && moneyUnit.unit != MoneyUnits.NONE ) label += moneyUnit.label; if( suffix ) label += suffix; } return label; } } }
单位实体类MoneyUnits.as:
package org.beasy.charts { /** * 货币单位对象 * * @author Marco */ public class MoneyUnits { //-------------------------------------------------------------------------- // // Class constants // //-------------------------------------------------------------------------- /** * 原始单位 */ public static const NONE:String = "none"; /** * 百 */ public static const HUNDRED:String = "hundred"; /** * 千 */ public static const THOUSAND:String = "thousand"; /** * 万 */ public static const TEN_THOUSAND:String = "TEN_THOUSAND"; /** * 十万 */ public static const LAKH:String = "lakh"; /** * 百万 */ public static const MILLION:String = "million"; //-------------------------------------------------------------------------- // // Constructor // //-------------------------------------------------------------------------- public function MoneyUnits( label:String = null, unit:String = null ) { super(); _label = label; _unit = unit; } //-------------------------------------------------------------------------- // // Properties // //-------------------------------------------------------------------------- /** * @private */ private var _label:String; /** * @private */ private var _unit:String; /** * 单位所对应的标签:百,千,万... */ public function set label(value:String):void { _label = value; } public function get label():String { return _label; } /** * 要转换的单位:HUNDRED，THOUSAND，TEN_THOUSAND... */ public function set unit(value:String):void { _unit = value; } public function get unit():String { return _unit; } /** * @private * * 根据代币单位计算 */ public static function formatByUnit( unitStr:String, num:Number ):Number { switch( unitStr ) { case MoneyUnits.NONE : break; case MoneyUnits.HUNDRED : num /= 100; break; case MoneyUnits.THOUSAND : num /= 1000; break; case MoneyUnits.TEN_THOUSAND : num /= 10000; break; case MoneyUnits.LAKH : num /= 100000; break; case MoneyUnits.MILLION : num /= 1000000; break; default : break; } return num; } } }
测试页面CustomLinearAxisLabelsFormat.mxml:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:charts="org.beasy.charts.*" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" fontSize="12"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var dataSource:ArrayCollection = new ArrayCollection([ { Country: "USA", Gold: 3500, Silver:3900, Bronze: 2900 }, { Country: "China", Gold: 3200, Silver:1700, Bronze: 1400 }, { Country: "Russia", Gold: 2700, Silver:2700, Bronze: 3800 }]); ]]> </fx:Script> <s:Panel title="图表轴标签自定义格式测试" width="500" height="500" left="20" top="20"> <s:layout><s:VerticalLayout/></s:layout> <mx:ColumnChart id="columnChart" width="100%" height="100%" dataProvider="{dataSource}" showDataTips="true"> <mx:verticalAxisRenderers> <charts:AxisRendererPlus id="axisRenderer" fontSize="12" useThousandsSeparator="{thousandsSeparator.selected}" precision="{precision.value}" prefix="{prefix.text}" suffix="{suffix.text}" moneyUnit="{moneyUnits.selectedItem}"> <charts:axis> <mx:LinearAxis id="vAxis"/> </charts:axis> </charts:AxisRendererPlus> </mx:verticalAxisRenderers> <mx:horizontalAxis> <mx:CategoryAxis categoryField="Country"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries displayName="Gold" yField="Gold" verticalAxis="{vAxis}"/> <mx:ColumnSeries displayName="Silver" yField="Silver" verticalAxis="{vAxis}"/> <mx:ColumnSeries displayName="Bronze" yField="Bronze" verticalAxis="{vAxis}"/> </mx:series> </mx:ColumnChart> <mx:Form> <mx:FormItem label="千位符:"> <s:CheckBox id="thousandsSeparator" selected="true"/> </mx:FormItem> <mx:FormItem label="小数点位数:"> <s:NumericStepper id="precision" minimum="0" maximum="2" stepSize="1" value="1"/> </mx:FormItem> <mx:FormItem label="前缀:"> <s:TextInput id="prefix" text="$"/> </mx:FormItem> <mx:FormItem label="后缀:"> <s:TextInput id="suffix"/> </mx:FormItem> <mx:FormItem label="单位:"> <mx:ComboBox id="moneyUnits"> <fx:Array> <charts:MoneyUnits label="无" unit="{MoneyUnits.NONE}"/> <charts:MoneyUnits label="百" unit="{MoneyUnits.HUNDRED}"/> <charts:MoneyUnits label="千" unit="{MoneyUnits.THOUSAND}"/> <charts:MoneyUnits label="万" unit="{MoneyUnits.TEN_THOUSAND}"/> <charts:MoneyUnits label="十万" unit="{MoneyUnits.LAKH}"/> </fx:Array> </mx:ComboBox> </mx:FormItem> </mx:Form> </s:Panel> </s:Application>
Ps: 全部代码请查看: http://code.google.com/p/beasy-flex-library/ 这里包含了本博所有文章源码.
SVN: http://beasy-flex-library.googlecode.com/svn/trunk/
Demo看不到哇
现在好了
Buy an essay or already written essay and be sure you get good information just about this good post*.