16.5.为图表创建自定义标签

16.5.1. 问题
我想自定义图表的标签。
16.5.2. 解决办法
使用样式和标签函数。
16.5.3. 讨论
图表中包含两种类型的标签:坐标轴标签和数据标签。坐标轴标签用于显示坐标轴上的点的数值,使用标签函数能自定义坐标轴标签。数据标签用于在数据点的位置和图表元素的位置显示数据值。

使用坐标轴标签可以很大程度上控制坐标轴标签的形式。例如你需要特殊的数据格式或者通用的格式,就可以使用标签函数。标签函数通用适用与数据标签。

标签函数对于数字坐标轴、分类坐标轴和数列的用法略有不同,如下所示。
数字坐标轴的标签函数有如下写法::
+展开
-ActionScript
function_name(labelValue:Object, previousLabelValue:Object, axis:IAxis):String


其参数如下:
labelValue
当前标签的数值;
previousLabelValue
该标签之前的一个标签的值。如果当前标签是第一个标签,那么previousLabelValue 的值就是null。
axis
坐标轴对象,和CategoryAxis 或者NumericAxis 对象相似。

分类坐标轴的标签函数有如下写法:
+展开
-ActionScript
function_name(labelValue:Object, previousLabelValue:Object, axis:axis_type,labelItem:Object):String

categoryValue
要描绘的类别的值。
previousCategoryValue
在坐标轴上前一个类别的值
axis
正在渲染的类别坐标轴的值。
categoryItem
当前描绘的数据提供器提供的项目

以下例子使用了一个CurrencyFormatter 来为纵坐标标签和数据标签定义格式
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontalbackgroundColor="0xFFFFFF"
initialize="onInit()">

<mx:Script>
<![CDATA[
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
import mx.charts.chartClasses.IAxis;
import mx.formatters.CurrencyFormatter;
[Bindable] public var chartDP:Array = [
{month:'Jan',costs:10000,sales:100000},
{month:'Feb',costs:7000,sales:220000},
{month:'Mar',costs:5000,sales:540000},
{month:'April',costs:8000,sales:60000},
{month:'May',costs:11000,sales:390000},
{month:'June',costs:12000,sales:790000},
{month:'July',costs:14000,sales:1220000}
];
private var formatter:CurrencyFormatter;
private function onInit():void
{
formatter = new CurrencyFormatter();
formatter.currencySymbol = '$';
formatter.precision = 0;
formatter.useThousandsSeparator = true;
}
private function currencyAxisLabel(value:Object,
previousValue:Object, axis:IAxis):String
{
return formatter.format(value);
}

]]>
</mx:Script>
<mx:LineChart dataProvider="{chartDP}" >
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{chartDP}categoryField="month" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis labelFunction="{currencyAxisLabel}" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="costsxField="monthdisplayName="Costs" />
</mx:series>
</mx:LineChart>
</mx:Application>

加支付宝好友偷能量挖...


评论(0)网络
阅读(98)喜欢(0)flash/flex/fcs/AIR