在 Adobe Flex 中创建漏斗图或金字塔图

 内容：

Pallav Nadhani
Pallav Nadhani 从 Flash 4 开始接触 Flash 和 Flex。目前他领导着 FusionCharts 的工程团队，专注于 web 数据可视化组件的构建。
查看 Pallav Nadhani 的所有文章
 
概述
一直以来，Flash 组件都是 web 上最受欢迎的可视化组件。借助 Flex，Flash 的界面设计又上升到一个全新的高度。借助其基于标签的设计原则和大量定制组件，Flex 不仅减少了总代码行数，而且极大地简化了界面设计。但是 Flex 中仍然缺少许多组件。例如，漏斗图常用于显示销售过程不同阶段的潜在收入。但是，Flex 不提供对此类图表的支持。幸运的是，有些第三方组件提供了 Flex 制图的替代方法。其中较突出的是 FusionCharts，提供仅用于 Flex 的模块。该模块非常便捷，因为它提供了可以绑定到 Flex 原数据结构的定制标签。因此，我们选择 FusionCharts for Flex 套件作为我们示例的基础。

设置
在设置 FusionCharts for Flex 模块之前，首先介绍一下它的工作原理。从技术上而言，FusionCharts 使用 AS2 编写，不能直接嵌入 Flex 环境。因此它使用 FlashInterface 与 Flex 运行时环境 (AVM2) 通信。如果想了解更多有关工作原理的内容，可以参见它们的文档，地址为：www.fusioncharts.com/flex/docs。
那么如何设置 FusionCharts for Flex 呢？非常简单，因为 FusionCharts for Flex 是以 Flex SWC 库模块的形式发行的。该模块可以与 Flex Builder 应用程序完全集成，也可以用作外部库（如果希望使用免费 SDK）。整个安装过程只是简单的复制粘贴过程，可分为 3 步执行：

：
1、下载 FusionCharts for Flex 模块并解压文档。解压 FusionCharts for Flex 文档的位置后续将作为 DISTRIBUTION_ROOT 引用。可以从 www.fusioncharts.com/flex/Download.asp 下载评测版。
2、创建一个新的 Flex 项目，用于关联 FusionCharts for Flex 模块。
3、将 DISTRIBUTION_ROOT/Charts 文件夹中的 FusionCharts.swc Shockwave Component 复制到 PROJECT_ROOT/libs 文件夹中。DISTRIBUTION_ROOT 根是下载和解压 FusionCharts for Flex 文档的位置。
4、将 fusioncharts 文件夹从 DISTRIBUTION_ROOT/Charts 文件夹到 PROJECT_ROOT/src 文件夹中。该文件夹保存所有图表 Flash 对象。

下图展示了合并 FusionCharts for Flex 模块之后得到的文件夹结构。我们将项目命名为 FusionCharts，因此默认将显示一个同名的 MXML 文件：

创建漏斗图表
设置好 FusionCharts 库之后，可以直接开始创建漏斗图表（funnel chart）。对于不熟悉术语“漏斗图表”的人，这里解释一下，漏斗图表是以递减比例显示值的一种图表。区块的大小由序列值占总值的百分比大小确定。
在我们的示例中，我们将展示网站访问向实际购买的转换过程和转换率。可以在 example.zip 文档的 funnel_example1.mxml 中获取本例的完整源代码。在此不再赘述，我们立即开始：
第 1 步：声明 FusionCharts 标签
首先，我们需要在 MXML 中声明 FusionCharts 标签。标签如下。
ns1:FusionChartsx="10" y="10" FCChartType="Funnnel" height="400"> <ns1:FCChartData /></ns1:FusionCharts>

 对于使用 ArrayCollections、XMLList 等 Flex 数据结构的情况，我们还需要声明子标签 FCChartData。使用该标签可以将 plot 数据、图表属性、样式绑定到 FusionCharts 对象。
第 2 步：定义图表属性

现在让我们创建一个 ArrayCollection 来描述图表的基本属性。我们应该调用ArrayCollection chartParam。声明如下：

[Bindable] private var chartParam:ArrayCollection=new ArrayCollection([ {caption: 'Conversion Ratio'}, {subcaption: 'May 2007'}, {showPercentValues: '1'}, ...]);

如果仔细观察就会发现，每个数组元素都是一个对象，该对象是属性及其对应值的列表。例如，图表标题声明为 {caption: 'Conversion Ratio'}。因此，不需要知道任何有关 FusionCharts XML 的内容，我们也可以向图表对象添加或从中移除属性。如果想了解其他可用属性，可以访问 Funnel Chart Reference。
第 3 步：提供图表数据
我们还必须声明该图表的数据集。数据集可以声明如下：

[Bindable] private var chartData:ArrayCollection=new ArrayCollection([ {label: "Website Visits", value: "385634" }, {label: "Downloads", value: "175631" }, {label: "Interested to buy", value: "84564" }, ...]);

漏斗图表的图表数据是一个简单的序列类型。每个对象都声明为 {label: "Downloads", value: "175631" }——一个简单的键值对。可以随意按任何顺序输入数据，图表将自动排序。
第 4 步：绑定 Flex Data 和 FusionCharts 对象
现在我们声明了散点图所必需的所有数据，我们应该将这些数据绑定到 FusionCharts 对象。正如上文所述，所有的 Flex 数据源都绑定到 FCChartData 标签的属性。绑定图表参数和数据源之后，数据源应该如下所示：

<ns1:FCChartData FCParams="{chartParam}" FCData="{chartData}" />

第 5 步：运行代码
最后是运行示例。可以在 example.zip 包中获取本例的完整源代码。按照上节所述设置 FusionCharts 库，然后编译 funnel_example1.mxml 文件。运行得到的 SWF 文件，您将看到如下图表：

配置各种属性
漏斗图表比较特殊，有一些仅适用于它们的特定属性。让我们看看这些属性以及如何操作它们：
绘制 2D 漏斗图表
绘制常规漏斗图表时，它将以 3D 形式呈现，并带有一个上下文菜单，通过它可以在 2D 和 3D 模式之间切换。但是，如果只希望将漏斗以 2D 形式呈现，可以定义 chartParam 数组中的 is2D 属性：

[Bindable] private var chartData:ArrayCollection=new ArrayCollection([ ... {is2D: '1'}, ...]);

在 2D 模式中，可以定制漏斗的边框属性，如下：

[Bindable] private var chartParam:ArrayCollection=new ArrayCollection([ ... {is2D: '1'}, {showPlotBorder: '1'}, {plotBorderThickness: '2'}, {plotBorderAlpha: '100'}, {plotBorderColor: 'CCCCCC'} ...]);

切开漏斗片
漏斗图表允许切开漏斗的不同部分。要切开一个数据集，只需要向该数据集的属性列表添加 isSliced: 1 属性：

[Bindable] private var chartData:ArrayCollection=new ArrayCollection([ ... {label: 'Interested to buy', value: '84564', isSliced: '1' }, ...]);

还可以在图标参数中声明属性以切开所有部分。也可以在每个数据集重写全局 isSliced 值以防止这些部分被切开。

[Bindable] private var chartParam:ArrayCollection=new ArrayCollection([ ... {isSliced: '1'}, ...]);

添加样式
下面我们来为图表添加样式。添加样式同样非常简单，只需制作一个新的 ArrayCollection。在样式数组中，我们必须声明两种对象：
样式对象，用于定义不同的样式
应用程序对象，用于将样式映射到各种对象
查看代码，了解是否清晰明了：

[Bindable]private var chartStyle:ArrayCollection=new ArrayCollection([ {name: 'CaptionSize', type: 'font', size: '17'}, {name: 'MyShadow', type: 'shadow'}, {toObject: 'Caption', styles: 'CaptionSize'}, {toObject: 'Caption', styles: 'MyShadow'}, {toObject: 'Dataplot', styles: 'MyShadow'}]);

这种样式声明对于重用和用于多个对象非常有利。在以上示例中，我们更改了标题的字体大小，同时向标题和数据图添加了阴影。
{name: 'MyShadow', type: 'shadow'} 对象用于声明样式。name 属性表示对象的名称，type 属性表示样式的类型。后面紧跟的是与特定样式类型有关的属性。接下来是将样式映射到特定图表对象，由 {toObject: 'Caption', styles: 'MyShadow'} 声明完成。很明显，style 属性定义样式的名称，toObject 定义应用样式的对象类型。
将新样式数组绑定到我们的图表对象：

<ns1:FCChartData FCData="{chartData}" FCParams="{chartParam}" FCStyles="{chartStyle}" />

可以从 example.zip 文档的 bubble_example2.mxml 文件中获取修改后的代码。得到的应用程序如下所示：

 

转换为金字塔图表
将图表转换为另一个图表非常简单。需要做的就是
更改图表类型。
确保当前数据与新图表类型的数据统一。如果不统一，则进行相应的更改。
对外观进行调整以适应新的图表类型。
要更改图表类型，只需要将 FCChartType 属性更改为 Pyramid。

<ns1:FusionCharts x="10" y="10" FCChartType="Pyramid" ...>

漏斗图表和金字塔图表的数据集本质上是相同的，只是数据的表示形式不同而已。因此我们不需要修改数据。
同样，金字塔图表的属性跟漏斗图表的属性相同。因此我们可以使用与在漏斗图表中相同的方式修改它们。
如果我们编译并运行文件，将得到如下图表：

 

可以从 example.zip 文档的 pyramid_example.mxml 文件中获取代码。
结束语
现在我们完成了图表的构建。您可以跟全世界分享自己的 FusionCharts 应用程序了。总之，使用 FusionCharts 构建图表非常容易。有了 FusionCharts 提供的定制标记和 Flex 数据绑定，它无疑是您构建 Flex 应用程序时的最佳选择。