flex系列基础教程：[8]flex图标效果3

电脑

flex环境

首先是定义一些数据，作为下面图标的数据源。这里的import是导入需要的包哦，mx.collections.ArrayCollection就是说明下文中ArrayCollection使用的是来自mx.collections包下的哦。import mx.collections.ArrayCollection;[Bindable]private var medalsAC:ArrayCollection = new ArrayCollection( [            { Country: 'USA', Gold: 35, Silver:39, Bronze: 29 },            { Country: 'China', Gold: 32, Silver:17, Bronze: 14 },            { Country: 'Russia', Gold: 27, Silver:27, Bronze: 38 } ]);

这里是图标的效果样式配置，其中有颜色，透明度，还有图标中线的粗细等。在这里你可以把样式修改成你自己的，比如把下边那个yellow换成红色，只要你愿意想怎么改就怎么该，另外颜色值支持多种形式哦，在下面的代码中就有提现哦。                              

这是主要就是图表的显示与布局配置。这这里你可以改变图表在哪显示，显示多大，怎么显示，就行下面的layout值是horizontal，说明要求panel内的元元素水平显示，当让showDataTips设置为true的时候，是指定该元素在鼠标停在上面的时候可以显示一些信息。                                                                                                                                                                                                                                                                                                                                             

当以上步骤都完成以后就可以编译查看效果了哦。把鼠标停留在柱面上看看效果。这个的颜色就不太好看了，你可以通过修改第二步中的配置来更改图表的整体风格哦，当然背景什么的你可以直接去设置css来改变。