Flex CategoryAxis 字體樣式修改
2024-09-12 17:51:24
供稿：網(wǎng)友
在群里面有朋友問(wèn)我，如何可以修改Flex Charts其中一個(gè)可視化標(biāo)簽：CategoryAxis的字體大小、顏色等方式。
CategoryAxis的定義：
CategoryAxis類(lèi)允許圖表表示由軸上的一組離散值組成的數(shù)據(jù)。通?？梢允褂肅ategoryAxis類(lèi)定義一組沿圖表的軸顯示的標(biāo)簽。例如，按城市、年份、業(yè)務(wù)部門(mén)等呈現(xiàn)數(shù)據(jù)的圖表。
CategoryAxis的繼承關(guān)系：
CategoryAxis → AxisBase → EventDispatcher → Object
從上述關(guān)系可以看出CategoryAxis沒(méi)有繼承UIComponent、DisplayObject等可視化容器，同時(shí)CategoryAxis也沒(méi)有一些關(guān)于文字設(shè)定方面的屬性，例如fontsize、fontWeight、textDecoration等。
不過(guò)我們可以利用其他的方式來(lái)實(shí)現(xiàn)這個(gè)功能。
CategoryAxis有一個(gè)叫做labelFunction的屬性，這個(gè)屬性的定義：指定一個(gè)函數(shù)，用于定義為CategoryAxis的dataProvider中的各個(gè)項(xiàng)目生成的標(biāo)簽。
所以修改的原理：可以利用labelFunction得到每個(gè)Label，然后再對(duì)其進(jìn)行修改。
片段代碼：
<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)軸上面，前一個(gè)類(lèi)別的值。
3、axis：CategoryAxis的實(shí)例化對(duì)象。
4、categoryItem：是將要呈現(xiàn)的dataProvider中的項(xiàng)目。
所以與標(biāo)簽有關(guān)系的只有第一個(gè)參數(shù)：item。
以下代碼分別是對(duì)CategoryAxis的標(biāo)簽進(jìn)行修改的代碼：
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、改變字體粗細(xì)：
private function categoryAxisLabelFun( item : Object, prevValue : Object, axis : CategoryAxis, categoryItem : Object) : String {
var temp : String = item as String;
return '<B>' + temp + </B>';
}
3、改變字體下劃線(xiàn)：
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>';
}
綜上所述，其實(shí)我們利用了一個(gè)很簡(jiǎn)單的方式，使用HTML標(biāo)簽對(duì)其Label進(jìn)行設(shè)置。
