Flex CategoryAxis 字體樣式修改
更新時(shí)間:2009年07月13日 00:19:53 作者:
Flex編程注意之修改CategoryAxis的字體樣式(大小、顏色、粗斜體等)
在群里面有朋友問我,如何可以修改Flex Charts其中一個(gè)可視化標(biāo)簽:CategoryAxis的字體大小、顏色等方式。
CategoryAxis的定義:
CategoryAxis類允許圖表表示由軸上的一組離散值組成的數(shù)據(jù)。通??梢允褂肅ategoryAxis類定義一組沿圖表的軸顯示的標(biāo)簽。例如,按城市、年份、業(yè)務(wù)部門等呈現(xiàn)數(shù)據(jù)的圖表。
CategoryAxis的繼承關(guān)系:
CategoryAxis → AxisBase → EventDispatcher → Object
從上述關(guān)系可以看出CategoryAxis沒有繼承UIComponent、DisplayObject等可視化容器,同時(shí)CategoryAxis也沒有一些關(guān)于文字設(shè)定方面的屬性,例如fontsize、fontWeight、textDecoration等。
不過我們可以利用其他的方式來實(shí)現(xiàn)這個(gè)功能。
CategoryAxis有一個(gè)叫做labelFunction的屬性,這個(gè)屬性的定義:指定一個(gè)函數(shù),用于定義為CategoryAxis的dataProvider中的各個(gè)項(xiàng)目生成的標(biāo)簽。
所以修改的原理:可以利用labelFunction得到每個(gè)Label,然后再對其進(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è)類別的值。
3、axis:CategoryAxis的實(shí)例化對象。
4、categoryItem:是將要呈現(xiàn)的dataProvider中的項(xiàng)目。
所以與標(biāo)簽有關(guān)系的只有第一個(gè)參數(shù):item。
以下代碼分別是對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、改變字體下劃線:
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è)很簡單的方式,使用HTML標(biāo)簽對其Label進(jìn)行設(shè)置。
CategoryAxis的定義:
CategoryAxis類允許圖表表示由軸上的一組離散值組成的數(shù)據(jù)。通??梢允褂肅ategoryAxis類定義一組沿圖表的軸顯示的標(biāo)簽。例如,按城市、年份、業(yè)務(wù)部門等呈現(xiàn)數(shù)據(jù)的圖表。
CategoryAxis的繼承關(guān)系:
CategoryAxis → AxisBase → EventDispatcher → Object
從上述關(guān)系可以看出CategoryAxis沒有繼承UIComponent、DisplayObject等可視化容器,同時(shí)CategoryAxis也沒有一些關(guān)于文字設(shè)定方面的屬性,例如fontsize、fontWeight、textDecoration等。
不過我們可以利用其他的方式來實(shí)現(xiàn)這個(gè)功能。
CategoryAxis有一個(gè)叫做labelFunction的屬性,這個(gè)屬性的定義:指定一個(gè)函數(shù),用于定義為CategoryAxis的dataProvider中的各個(gè)項(xiàng)目生成的標(biāo)簽。
所以修改的原理:可以利用labelFunction得到每個(gè)Label,然后再對其進(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è)類別的值。
3、axis:CategoryAxis的實(shí)例化對象。
4、categoryItem:是將要呈現(xiàn)的dataProvider中的項(xiàng)目。
所以與標(biāo)簽有關(guān)系的只有第一個(gè)參數(shù):item。
以下代碼分別是對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、改變字體下劃線:
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è)很簡單的方式,使用HTML標(biāo)簽對其Label進(jìn)行設(shè)置。
相關(guān)文章
Flex 全屏組件 部分全屏的實(shí)現(xiàn)代碼
一般情況下,F(xiàn)lex全屏是指將整個(gè)舞臺(tái)全屏,而不是待定的組件全屏.網(wǎng)上的例子也一般是指這種情況的.2009-09-09
Flex結(jié)合JavaScript讀取本地路徑的方法
鑒于adobe并沒有提供FileReference對瀏覽的文件的完整路徑的接口。只能采用JS和fileinput控件來獲取本地路徑了。2009-02-02
Flex include和import ActionScript代碼
為了讓你的MXML代碼可讀性增強(qiáng),你可以在<mx:Script>標(biāo)簽內(nèi)引用ActionScript代碼文件,而不是把大塊的代碼都插入到<mx:Script>里。引用ActionScript有include和import兩種方式。2009-08-08
Flex Javascript交互實(shí)現(xiàn)代碼
刪除swf這里需要提醒下,因?yàn)閑mbedSWF是替換標(biāo)簽,而不是填充。2009-06-06
Flex 非常實(shí)用的學(xué)習(xí)資料整理
對于學(xué)習(xí)flex 的朋友,絕對是個(gè)不錯(cuò)的一些資料,大家可以用ctrl+F搜索獲取2009-01-01
Flex 創(chuàng)建復(fù)數(shù)行文本內(nèi)容的List
效果不錯(cuò)的flex多行文本2008-11-11

