利用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,在里面用渐变色填充就可以了,下面是一个参考实现:
var fillColor:IFill = this.data.fill; var gradientColor:LinearGradient = new LinearGradient(); var g1:GradientEntry = new GradientEntry(origColor, 0.00, 1); var g2:GradientEntry = new GradientEntry(0xFFFFFF, 0.5, 1); var g3:GradientEntry = new GradientEntry(origColor, 0.8, 1); gradientColor.entries = [g1,g2,g3]; gradientColor.begin(this.graphics,rc); this.graphics.lineTo(rc.right,rc.top); this.graphics.lineTo(rc.right,rc.bottom); this.graphics.lineTo(rc.left,rc.bottom); this.graphics.lineTo(rc.left,rc.top); gradientColor.end(this.graphics); }
是不是很简单?Flex组件架构中这种itemRenderer的设计真是很强大,让我们有很大的空间去扩展,就看你的发挥程度了!

.gif)
.gif)




.gif)
发表新评论