Flex CategoryAxis font style modification

A friend in the group asked me how to modify one of the visual tags of Flex Charts: CategoryAxis' font size, color, etc.

Definition of CategoryAxis:
The CategoryAxis class allows a graph to represent data composed of a set of discrete values ​​on the axis. You can usually use the CategoryAxis class to define a set of labels displayed along the axis of the chart. For example, a graph of data is presented by city, year, business department, etc.
CategoryAxis inheritance relationship:
CategoryAxis → AxisBase → EventDispatcher → Object
From the above relationship, it can be seen that CategoryAxis does not inherit visual containers such as UIComponent and DisplayObject. At the same time, CategoryAxis does not have some attributes regarding text setting, such as fontsize, fontWeight, textDecoration, etc.

But we can use other ways to implement this function.
CategoryAxis has a property called labelFunction. The definition of this property: specifies a function to define the label generated by each item in the dataProvider of CategoryAxis.

So the principle of modification: you can use labelFunction to get each Label and then modify it.

Fragment code:


<mx:horizontalAxis>
<mx:CategoryAxis
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;
}

The parameters of categoryAxisLabelFun:
1. item: What is saved is the text information in Label.
2. prevValue: The value of the previous category above the axis.
3. axis: The instantiated object of CategoryAxis.
4. categoryItem: It is the item in the dataProvider to be presented.
So the only thing that has something to do with the tag is the first parameter: item.

The following codes are the codes that modify the tags of CategoryAxis:

1. Change the font size:
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. Change the font thickness:
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<B>' + temp + </B>';
}

3. Change the font underline:
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<U>' + temp + </U>';
}

4. Change the font italics:
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<I>' + temp + </I>';
}

5. Change the font color:
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<font color="#ff0000">' + temp + </font>';
}

To sum up, we actually used a very simple method to set up its Label using HTML tags.