Flex CategoryAxis 字体样式修改

在群里面有朋友问我，如何可以修改Flex Charts其中一个可视化标签：CategoryAxis的字体大小、颜色等方式。

CategoryAxis的定义：
CategoryAxis类允许图表表示由轴上的一组离散值组成的数据。通常可以使用CategoryAxis类定义一组沿图表的轴显示的标签。例如，按城市、年份、业务部门等呈现数据的图表。
CategoryAxis的继承关系：
CategoryAxis → AxisBase → EventDispatcher → Object
从上述关系可以看出CategoryAxis没有继承UIComponent、DisplayObject等可视化容器，同时CategoryAxis也没有一些关于文字设定方面的属性，例如fontsize、fontWeight、textDecoration等。

不过我们可以利用其他的方式来实现这个功能。
CategoryAxis有一个叫做labelFunction的属性，这个属性的定义：指定一个函数，用于定义为CategoryAxis的dataProvider中的各个项目生成的标签。

所以修改的原理：可以利用labelFunction得到每个Label，然后再对其进行修改。

片段代码：


<mx:horizontalAxis>
<mx:CategoryAxis id="ca"
categoryField="@date" title="August 2007" labelFunction="categoryAxisLabelFun" />
</mx:horizontalAxis>

private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return temp;
}

其中categoryAxisLabelFun的参数：
1、item：保存的就是Label里面文字信息。
2、prevValue：坐标轴上面，前一个类别的值。
3、axis：CategoryAxis的实例化对象。
4、categoryItem：是将要呈现的dataProvider中的项目。
所以与标签有关系的只有第一个参数：item。

以下代码分别是对CategoryAxis的标签进行修改的代码：

1、改变字体大小：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<font size="20">' + temp + </font>';
}

2、改变字体粗细：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<B>' + temp + </B>';
}

3、改变字体下划线：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<U>' + temp + </U>';
}

4、改变字体斜体：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<I>' + temp + </I>';
}

5、改变字体颜色：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<font color="#ff0000">' + temp + </font>';
}

综上所述，其实我们利用了一个很简单的方式，使用HTML标签对其Label进行设置。

最新评论