Flex CategoryAxis 字體樣式修改
2024-09-12 17:51:24
供稿：網(wǎng)友
在群里面有朋友問我，如何可以修改Flex Charts其中一個可視化標(biāo)簽：CategoryAxis的字體大小、顏色等方式。
CategoryAxis的定義：
CategoryAxis類允許圖表表示由軸上的一組離散值組成的數(shù)據(jù)。通常可以使用CategoryAxis類定義一組沿圖表的軸顯示的標(biāo)簽。例如，按城市、年份、業(yè)務(wù)部門等呈現(xiàn)數(shù)據(jù)的圖表。
CategoryAxis的繼承關(guān)系：
CategoryAxis → AxisBase → EventDispatcher → Object
從上述關(guān)系可以看出CategoryAxis沒有繼承UIComponent、DisplayObject等可視化容器，同時CategoryAxis也沒有一些關(guān)于文字設(shè)定方面的屬性，例如fontsize、fontWeight、textDecoration等。
不過我們可以利用其他的方式來實現(xiàn)這個功能。
CategoryAxis有一個叫做labelFunction的屬性，這個屬性的定義：指定一個函數(shù)，用于定義為CategoryAxis的dataProvider中的各個項目生成的標(biāo)簽。
所以修改的原理：可以利用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的參數(shù)：
1、item：保存的就是Label里面文字信息。
2、prevValue：坐標(biāo)軸上面，前一個類別的值。
3、axis：CategoryAxis的實例化對象。
4、categoryItem：是將要呈現(xiàn)的dataProvider中的項目。
所以與標(biāo)簽有關(guān)系的只有第一個參數(shù)：item。
以下代碼分別是對CategoryAxis的標(biāo)簽進行修改的代碼：
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標(biāo)簽對其Label進行設(shè)置。
