使用 Flex3 开发 OLAP 应用（2）图表控件的使用

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-3 11:56 | 只看该作者

使用 Flex3 开发 OLAP 应用（2）图表控件的使用

图表控件的使用使用 Flex 中的组件通常有两种方式，一种是直接在 .mxml 文件的类 xml 标签中通过属性来指定这个组件的展现方式，这是最直观的方式。而另一种则将显示与逻辑分离，在 .mxml 文件中只是声明了将使用的组件，而具体的获得数据过程与数据展现过程则在相对应的 .as (actionscript) 中用编程的方式实现。本文将采用第二种方式进行描述：

首先新建一个 OLAPAppInFlex 的 Flex application。
接着用 ViewStack 组件将我们所要展示的三种图表控件粘合在一起，通过点击 ViewStack 的 tab 页来查看不同的展示效果。

清单 1. OLAPAppInFlex.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<mx:Script source="include/Chart.as" />
……
<mx:ViewStack id="viewStack" width="100%" height="75%" creationComplete="showData()">
<mx:HBox id="columnBox" name="ColumnChart" width="100%">
<mx:ColumnChart id="columnChart" showDataTips="true" width="100%" height="100%"/>
<mx

anel id="columnLegendPanel" horizontalScrollPolicy="off">
<mx:Box maxHeight="250" horizontalScrollPolicy="off">
<mx

egend id="columnLegend" width="100%" />
</mx:Box>
</mx

anel>
</mx:HBox>

<mx:HBox id="pieBox" name="

ieChart" width="100%">
</mx:HBox>

<mx:HBox id="lineBox" name="LineChart" width="100%">
<mx

ineChart id="lineChart" showDataTips="true" width="100%" height="100%" />
<mx

anel id="lineLegendPanel" horizontalScrollPolicy="off">
<mx:Box maxHeight="250" horizontalScrollPolicy="off">
<mx

egend id="lineLegend" width="100%" />
</mx:Box>
</mx

anel>
</mx:HBox>
</mx:ViewStack>

在上述代码中第一行引入了 Chart.as，并在此文件中实现了图形的展现逻辑。
而在介绍 Chart.as 如何实现图形的展现逻辑前，先介绍两个一般性的问题：

数据的来源与格式

一般说来，在 Flex UI 上展现的数据都是首先通过服务器端处理后返回的，而 server 和 client 通讯的方式可能是 webservice，httpservice，也可能是序列化好的二进制对象。本文为了清晰地说明 Flex UI 端的功能，故将与服务器通讯（即 OLAP 服务器）这一部分省去，并采用经典 OLAP 示例中最常用的二维数据：产品维，时间维，以及相对应的度量值：销售额来进行阐述。如清单 2 所示。
OLAP 常用术语 OLAP 展现在用户面前的是一幅幅多维视图。维（Dimension）：是人们观察数据的特定角度，是考虑问题时的一类属性，属性集合构成一个维（时间维、地理维等）。维的层次（Level）：人们观察数据的某个特定角度（即某个维）还可以存在细节程度不同的各个描述方面（时间维：日期、月份、季度、年）。维的成员（Member）：维的一个取值，是数据项在某维中位置的描述。（“某年某月某日”是在时间维上位置的描述）。度量（Measure）：多维数组的取值。（2009 年 12 月，北京，笔记本电脑，7898）。

清单 2. 本文使用数据示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

roduct Department Level</dim1label>
<dim2label>Year Level</dim2label>
<item>
<dim1>FURNITURE</dim1>
<dim2>2009</dim2>
<measure>4019.08</measure>
</item>
<item>
<dim1>FURNITURE</dim1>
<dim2>2008</dim2>
<measure>2461.49</measure>
</item>
<item>
<dim1>FURNITURE</dim1>
<dim2>2006</dim2>
<measure>2188.57</measure>
</item>
...
</dataset>

数据的解析

本文中所展示的数据均采用标准的 xml 格式。
原因之一是 Flex API 有着异常简洁而强大的 xml 处理能力，很多组件亦可以直接接收 xml 数据作为其 dataprovider。在本文中，所有数据均用 Flex 的 XML API 进行解析。
原因之二是 IBM 的 DB2 系列产品从 V9 之后对 xml 有原生的支持，这样从数据库到 server，再到 client，甚至不需要对额外的转换操作，均能统一成标准的 xml 格式。
接下来我们介绍 Flex 中的 Column Chart 与 Pie Chart 组件对于数据的展示。
Column ChartColumn Chart 即通常所说的柱状图，其数据组成方式分为 X 轴和 Y 轴，分别展示待显示数据的某种维度信息。对于本文的例子来说，X 轴是从 xml 数据中提取的时间维信息（清单 3 中所示的 dim2list），而 Y 轴是从 xml 数据中提取的对应各种产品维的销售值。
清单 3. 准备维度信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

dim1list = new Array();
dim2list = new Array();

// 取出清单 2 中的不同维度信息 ( 产品维 )，形成 dim1list，以便之后对 dim1list 进行
// 遍历得到具体的度量值 ( 销售值 )
for each(var dim1val:String in chartXML.item.dim1) {
if (dim1list.indexOf(dim1val) < 0)
dim1list.push(dim1val);
}

// 取出清单 2 中的不同维度信息 ( 时间维 )，形成 dim2list
// 如果需要在 X 轴上显示产品维信息，则简单地将 dim1 与 dim2 互换即可达到效果
for each(var dim2val:String in chartXML.item.dim2) {
if (dim2list.indexOf(dim2val) < 0)
dim2list.push(dim2val);
}

而每一个柱状图集合对应于一个 ColumnSeries，在此例子中，我们遍历接收到的 xml 数据，构建了多个 ColumnSeries，并对每个 ColumnSeries 设置其相应的产品维信息作为 dataProvider。最后，每个 CategoryAxis 是数据按照 X 轴维度展示的依据。
清单 4. 创建 Column Chart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

columnChart.series = new Array();

// 对 dim1list 进行遍历，并分别建立对应的 series
for each (var s:String in dim1list) {
// 得到遍历时该维度的度量值集合
var localXML:XMLList = chartXML.item.(dim1==s);

// 创建该维度对应的 series 并设置相应属性
var localSeries:ColumnSeries = new ColumnSeries();localSeries.dataProvider = localXML;localSeries.yField = "measure";localSeries.xField = "dim2";

// 设置提示信息
localSeries.displayName = s;

// 将该维度 series 置入柱状图中
columnChart.series.push(localSeries);
}

// 横 (X) 轴是另一种维度信息 ( 此例中是时间维 )
var hAxis:CategoryAxis = new CategoryAxis();

hAxis.dataProvider = dim2list;
hAxis.title = chartXML.dim2label;
columnChart.horizontalAxis = hAxis;
...
}

图 1. Column Chart

收藏分享评分

回复引用

订阅 TOP

返回列表