在群里面有朋友問我，如何可以修改Flex Charts其中一個可視化標簽：CategoryAxis的字體大小、顏色等方式。

CategoryAxis的定義：
CategoryAxis類允許圖表表示由軸上的一組離散值組成的數(shù)據(jù)。通常可以使用CategoryAxis類定義一組沿圖表的軸顯示的標簽。例如，按城市、年份、業(yè)務部門等呈現(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中的各個項目生成的標簽。

所以修改的原理：可以利用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：坐標軸上面，前一個類別的值。
3、axis：CategoryAxis的實例化對象。
4、categoryItem：是將要呈現(xiàn)的dataProvider中的項目。
所以與標簽有關(guān)系的只有第一個參數(shù)：item。

以下代碼分別是對CategoryAxis的標簽進行修改的代碼：

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標簽對其Label進行設(shè)置。

最新評論