[Flex] Notes for flex programming: modifying the font style (size, color, bold italic, etc.) of categoryaxis)

See http://www.k-zone.cn/zblog/post/flex-categoryaxis-style.html for details

A friend in the group asked me how to modify the font size and color of one of flex charts visual labels: categoryaxis.

Definition of categoryaxis:
The categoryaxis class allows charts to represent data composed of discrete values on the axis. You can usually use the categoryaxis class to define a group of labels displayed along the axis of the chart. For example, charts that display data by city, year, or business department.
Inheritance relationship of categoryaxis:
Categoryaxis → axisbase → eventdispatcher → object
From the relationship above, we can see that categoryaxis does not inherit visualization containers such as uicomponent and displayobject, and categoryaxis does not have some attributes about text settings, such as fontsize, fontweight, and textdecoration.

However, we can use other methods to implement this function.
Categoryaxis has an attribute called labelfunction. Its definition is to specify a function that is used to define the tags generated by various projects in dataprovider of categoryaxis.

So the principle of modification: You can use labelfunction to get each label and then modify it.

Code snippet:
<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;
}

Here, the categoryaxislabelfun parameter is as follows:
1. item: The text information in the label is saved.
2. prevvalue: the value of the previous category above the coordinate axis.
3. axis: instantiated object of categoryaxis.
4. categoryitem: the project in the dataprovider to be presented.
So there is only one parameter related to the tag: item.
 
The following code modifies the categoryaxis label:
 
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 width:
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 Italic font:
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 use a very simple method to set its label using HTML tags.