利用itemRenderer创建有渐变效果的柱图

FlexBuilder自带的图形组件样式如果不经过设置的话,稍微显得呆板些,效果不够理想,这里介绍一个比较高级的处理方法,让柱图的柱子有点立体感;

在Flexbuilder3/Help/Adobe Flex3 Help/Flex Data Visualization Developer's Guide/Flex Charting Components/Formating Charts/Skinning ChartItem objects/Creating Custom renderers中,有对散点图、柱图的序列中的图形对象自定义的例子,那么我们根据这个原理,来为柱图的ColumnSeries自定义一个renderer就可以实现渐变的柱型图了;

根据查找ColumnSeries的API,发现它的styles中,有itemRenderer="BoxItemRenderer"属性,那么我们只要扩展这个renderer,重载其中的updateDisplaylist,在里面用渐变色填充就可以了,下面是一个参考实现:

  1. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
  2. var fillColor:IFill = this.data.fill;
  3. var origColor:uint = SolidColor(fillColor).color;
  4. var gradientColor:LinearGradient = new LinearGradient();
  5. var g1:GradientEntry = new GradientEntry(origColor, 0.00, 1);
  6. var g2:GradientEntry = new GradientEntry(0xFFFFFF, 0.5, 1);
  7. var g3:GradientEntry = new GradientEntry(origColor, 0.8, 1);
  8. gradientColor.entries = [g1,g2,g3];
  9. var rc:Rectangle = new Rectangle(0,0,unscaledWidth-3,unscaledHeight);
  10. gradientColor.begin(this.graphics,rc);
  11. this.graphics.lineTo(rc.right,rc.top);
  12. this.graphics.lineTo(rc.right,rc.bottom);
  13. this.graphics.lineTo(rc.left,rc.bottom);
  14. this.graphics.lineTo(rc.left,rc.top);
  15. gradientColor.end(this.graphics);
  16.  
  17. }

是不是很简单?Flex组件架构中这种itemRenderer的设计真是很强大,让我们有很大的空间去扩展,就看你的发挥程度了!

riadevID: 
您给予的分值: None 平均分: 9 ( 3 票)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证:请回答下面的问题