不同状态下Series的填充

Series(数据系列)是由一个或多个ChartItem(图表项目)组成的。图表项目在单一状态下的颜色填充是很简单的,设定fill样式就搞定了。然而多数情况下,图表项目是有不同状态的,比如禁用且无法选中状态、具有焦点但并未显示为处于选中状态、鼠标滑过状态、处于选中状态但没有焦点等状态,那如何实现不同状态下图表项目的填充呢?本文仅以Bubble数据系列为例进行讲解。

首先我们得让Bubble图表项目具有多种状态,只要设置Bubble图表的selectionMode属性为none就行了。

1. 使用默认的实心填充

如果是用实心填充Bubble数据系列,默认下,Bubble图表项目在未选中时会是棕黄色,当鼠标滑过时会比未选中颜色暗一些,但会比选中时亮一些 。点击此处查看效果。

2. 自定义实心填充

如果要自定义实心填充,可简单地通过设置fill、itemDisabledColor、itemRollOverColor 和itemSelectionColor 样式来实现。其中使用 itemDisabledColor样式表示图表中未选中时图表项目的颜色并非字面意义上禁用的颜色。点击此处查看效果。

3. 使用默认的渐变填充

在GradientFill.mxml中,我们将fill样式设定为RadialGradient类的实例,实现了Bubble图表项目在未选中和失去焦点时放射渐变填充。但问题 也出来了,图表项目在其它状态下仍用实心填充。点击此处查看效果。

4. 自定义渐变填充

大家可以用用ChartItemEvent类型事件试一下,事实上是无法解决这个问题的。事实上,数据系列呈现这些项目时,BubbleSeries 类会将其传递 到itemRenderer,我们得从itemRenderer入手。

Bubble数据系列默认的itemRenderer为CircleItemRenderer类。参看CircleItemRenderer.as源码,你会发现该类在各种状态下都是用实心填充图 表项目。因此为支持需要渐变填充,得改写这个类。为了简便,我们另外自定义了一个RadialGradientEx类,设定其第一个渐变对象的颜色值为白色,这样会在图表项目上部产生 高光效果。另外设定填充矩形的高为图表项目高的一半,这样可让高光效果真实一些。详情请参看GradientCircleItemRenderer.as。

点击此处查看本实例的效果,点击此处下载本实例的源码。

前两种填充很简单,第三种填充没有实用价值,最后一种填充方法值得关注。

发表评论