电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Flex3 开发 OLAP 应用（4）图表控件的使用 [打印本页]

作者: look_w 时间: 2018-9-3 12:18 标题: 使用 Flex3 开发 OLAP 应用（4）图表控件的使用

OLAPDataGrid 的使用在 Flex3 之前，大多数的表格都是基于 DataGrid 的，其以多列布局显示给定的数据集。而在 Flex3 中，添加了两个类似于 DataGrid 的控件：AdvancedDataGrid 和 OLAPDataGrid。其中 OLAPDataGrid 组件的出现，大大加速了 OLAP 应用中常见的多表头数据集的开发。接下来我们重点介绍 OLAPDataGrid 的用法及相应扩展。
在 .mxml 中定义 OLAPDataGrid 组件的代码如下：
<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"></mx:OLAPDataGrid>
而具体的构建 OLAPDataGrid 的动作，同样我们也放在 actionscript 中进行。数据立方体模型作为 OLAP 应用中的模型核心，在 Flex 的 OLAPDataGrid 组件中亦如此。
数据立方体数据立方体是一类多维矩阵，允许以多维角度对数据建模和观察。

首先我们需要在逻辑定义 cube 模型的各维度信息，本例子就是清单 1 中所示的产品维和时间维。

接着我们就可以构建这个 cube。OLAPCube 的 elements 属性包含了所有需要显示的维度，所以此例中将两维信息（产品，时间）以 OLAPDimension 加入其中，而度量值（销售额）则以 OLAPMeasure 的方式加入其中。对于产品维和时间维需要用 OLAPDimension 来设置相应的 OLAPAttribute 与 OLAPHierarchy，销售额维则采用 OLAPMeasure 来设置。清单 6. createCube

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

private function createMyCube():void {
myCube = new OLAPCube();
myCube.addEventListener(CubeEvent.CUBE_COMPLETE, runQuery);

// 创建 dim1 维度
var dim1:OLAPDimension = new OLAPDimension("Dim1");

// 对于 dim1 创建其 attributes
var attr1:OLAPAttribute = new OLAPAttribute(chartXML.dim1label);
attr1.dataField = "dim1";
attr1.displayName = chartXML.dim1label;

dim1.attributes = new ArrayCollection([ attr1 ]);

// 在维上创建用户定义的 hierarchy
var dim1Hierarchy:OLAPHierarchy = new OLAPHierarchy("Dim1");

// 在 hierarchy 上定义 level
var level1:OLAPLevel = new OLAPLevel();
level1.attributeName = chartXML.dim1label;

dim1Hierarchy.levels = new ArrayCollection([ level1 ]);

// 将创建好的 hierarchy 设置在 dim1 上
dim1.hierarchies = new ArrayCollection([ dim1Hierarchy ]);

// 创建 dim2 维度
var dim2:OLAPDimension = new OLAPDimension("Dim2");

// 对于 dim2 创建其 attributes
var attr2:OLAPAttribute = new OLAPAttribute(chartXML.dim2label);
attr2.dataField = "dim2";
//attr2.displayName = chartXML.dim2label;

dim2.attributes = new ArrayCollection([ attr2 ]);

// 在维上创建用户定义的 hierarchy
var dim2Hierarchy:OLAPHierarchy = new OLAPHierarchy("Dim2");

// 在 hierarchy 上定义 level
var level2:OLAPLevel = new OLAPLevel();
level2.attributeName = chartXML.dim2label ;

dim2Hierarchy.levels = new ArrayCollection([ level2 ]);

// 将创建好的 hierarchy 设置在 dim2 上
dim2.hierarchies = new ArrayCollection([ dim2Hierarchy ]);

// 创建 measure 度量信息
var measure:OLAPMeasure = new OLAPMeasure("Measure");
measure.dataField = "measure";
measure.aggregator = "SUM";

// dim1 维度，dim2 维度以及 measure 度量信息构成了整个 cube 的所有元素
myCube.elements = [ dim1, dim2, measure ];
}

然后我们创建 OLAPQuery 来查询。myCube.addEventListener(CubeEvent.CUBE_COMPLETE, runQuery); 在这句话中，用到了 Flex 中常用的回调机制——当 cube 模型建立完成后，会自动调用 runQuery 方法来执行默认的查询。在 runQuery 方法中，接收 CubeEvent 的 target 作为其 IOLAPCube，然后构建一个 IOLAPQuery 并继而执行之。在每个 IOLAPQuery 中，均有 ROW_AXIS 与 COLUMN_AXIS 两个维度。并继而对横轴和纵轴分别添加相应的 OLAPSet 信息以填充具体的数据信息。
清单 7. runQuery

1
2
3
4
5
6
7
8
9
10

private function runQuery(cubeEvent:CubeEvent):void {
// 得到清单 6 创建好的 cube，cubeEvent 通过回调的方式将其返回
var cube:IOLAPCube = IOLAPCube(cubeEvent.currentTarget);
// 创建查询实例
var query:IOLAPQuery = getQuery(cube);
// 执行查询
var token:AsyncToken = cube.execute(query);
// 设置回调函数来处理返回结果及错误信息
token.addResponder(new AsyncResponder(showResult, showFault));
}

清单 8. getQuery

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

private function getQuery(cube:IOLAPCube):IOLAPQuery {
// 创建 OLAPQuery 实例来表示一次查询
var query:OLAPQuery = new OLAPQuery;

// 得到此查询的横轴
var rowQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.ROW_AXIS);
// 创建对应于横轴的 OLAPSet
var productSet:OLAPSet = new OLAPSet;
// 从 cube 中将关于产品维的聚集数据加入此 OLAPSet 中
productSet.addElements(
cube.findDimension("Dim1").findAttribute(chartXML.dim1label).children);
rowQueryAxis.addSet(productSet);

// 得到此查询的纵轴
var colQueryAxis:IOLAPQueryAxis = query.getAxis(OLAPQuery.COLUMN_AXIS);
// 创建对应于纵轴的 OLAPSet
var quarterSet:OLAPSet= new OLAPSet;
// 从 cube 中将关于时间维的聚集数据加入此 OLAPSet 中
quarterSet.addElements(
cube.findDimension("Dim2").findAttribute(chartXML.dim2label).children);
colQueryAxis.addSet(quarterSet);

return query;
}

最后用 OLAPDataGrid 来显示查询结果。一般来说我们可以在 .mxml 文件可以设置类似 <mx:xxx></mx:xxx> 的方式来构建 OLAPDataGrid，但在本例中，所有 OLAPDataGrid 的子元素构建过程均通过 actionscript 来完成。清单 9. showResult

1
2
3
4
5
6
7
8

private function showResult(result:Object, token:Object):void {
if (!result) {
Alert.show("No results from query.");
return;
}

myOLAPDG.dataProvider= result as OLAPResult;
}

图 4. OLAPDataGrid

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)