使用 Flex3 开发 OLAP 应用(4)图表控件的使用
 
- UID
- 1066743
|

使用 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. runQuery1
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. getQuery1
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
|
|
|
|
|
|