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

2024-04-27 13:52:22

字体：大中小

来源：转载

供稿：网友

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="horizontal" backgroundColor="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="costs" xField="month" displayName="Costs" />
</mx:series>
</mx:LineChart>
</mx:Application>