论坛首页 编程语言技术论坛

[Flex]Flex编程注意之修改CategoryAxis的字体样式(大小、颜色、粗斜体等)

浏览 3851 次
精华帖 (0) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-06-19  

详细请看:http://www.k-zone.cn/zblog/post/flex-categoryaxis-style.html
群里面有朋友问我,如何可以修改Flex Charts其中一个可视化标签:CategoryAxis的字体大小、颜色等方式。 

CategoryAxis的定义:
CategoryAxis类允许图表表示由轴上的一组离散值组成的数据。通常可以使用CategoryAxis类定义一组沿图表的轴显示的标签。例如,按城市、年份、业务部门等呈现数据的图表。
CategoryAxis的继承关系:
CategoryAxis → AxisBase → EventDispatcher → Object
从上述关系可以看出CategoryAxis没有继承UIComponent、DisplayObject等可视化容器,同时CategoryAxis也没有一些关于文字设定方面的属性,例如fontsizefontWeighttextDecoration等。

不过我们可以利用其他的方式来实现这个功能。
CategoryAxis有一个叫做labelFunction的属性,这个属性的定义:指定一个函数,用于定义为CategoryAxisdataProvider中的各个项目生成的标签。

所以修改的原理:可以利用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的参数:
1、item:保存的就是Label里面文字信息。
2、prevValue:坐标轴上面,前一个类别的值。
3、axis:CategoryAxis的实例化对象。
4、categoryItem:是将要呈现的dataProvider中的项目。
所以与标签有关系的只有第一个参数: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进行设置。

 

   发表时间:2009-06-19   最后修改:2009-06-19
也可以用css来设置。
Chart的
horizontalAxisStyleName和verticalAxisStyleName
如果要对某些具体数据进行设置那css就不行了,得用lz的方法

另外,请教下,关于 X和Y 的Axis 上的刻度跨度在哪里可以设置?
0 请登录后投票
   发表时间:2009-06-20  
Flex它在页面使用输入法常常看到,还有Firefox在不能输入中文。
0 请登录后投票
论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics