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

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

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

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

Column Chart 的扩展针对 Column Chart，亦可以简单的作如下扩展：

将 X 轴和 Y 轴互换——这可以通过变换 xml 数据遍历的方式达到。
柱状图上显示数据的方式——此处柱状图上显示的数据值均为 xml 数据的返回值，而在某些需求下显示的为 MAX，MIN，AVG 或 SUM 值。这种情况下，我们可以用两种方式达到效果：一是在本地对得到的数据进行处理，二是重新发出请求至服务器端，并返回想要的数据。
在柱状图上添加上钻，下钻操作——这可以通过对柱状图以编程的方式扩展其 item renderer 实现，具体逻辑可参考后文对 OLAPDataGrid 的扩展。

Pie Chart在构建 PieChart 时，我们在 .mxml 文件中仅定义了
<mx:HBox id="pieBox" name="

ieChart" width="100%"></mx:HBox>
而关于 PieChart 的一切细节，在 actionscript 中动态生成。PieChart 与 ColumnChart 在构建上有很大的不同，首先它没有所谓的 CategoryAxis（因为饼图并没有 X 轴和 Y 轴），而是用类似于极坐标的方式来展现和定位数据。如果我们尝试把多个饼图（每个以 PieSeries 的方式）在一个组件中展示出来时，Flex 的默认行为为多个饼图以嵌套的方式进行呈现。如图 2 所示。
图 2. Pie Chart – default style

Pie Chart 的扩展对于饼图，我们更多情况中并不需要对某一维度进行比较，而饼图本身从设计上也并不能很好的展示出这种比较。所以我们更希望多个饼图以彼此不影响的方式进行呈现。
这就需要借助 actionscript 中对 Flex 组件动态构建的功能。我们知道，Flex 的类库和组件都是以面向对象的方式设计的，任何组件都可以看成一个对象，其孩子元素以树的方式逐级构建出这个组件的展现。在这里，我们可以将 pieBox 作为一个根元素，并根据传来的 xml 数据，动态地构建相应数量的 panel，而在每个 panel 中，相应添加一个 PieChart。
清单 5. 扩展 pieChart

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

private function createPieChart():void {
pieBox.removeAllChildren();
var length:int = dim1list.length;
for each (var s:String in dim2list) {
var pieChartPanel

anel = new Panel();

   var localXML:XMLList = chartXML.item.(dim2==s);
   // 与清单 1 在 mxml 中设置默认的 columnChartcreate 不同，此处是在 actionscript 中
   // 以面向对象的编程方式创建 pieChart，但他们的效果是一样的
   var pieChart

ieChart = new PieChart();
   pieChart.showDataTips = true;
   // 创建饼图对应的 series
   var localSeries

ieSeries = new PieSeries();localSeries.dataProvider = localXML;localSeries.field = "measure";localSeries.nameField = "dim1";
   localSeries.displayName = s;

   pieChart.series.push(localSeries);

   pieChartPanel.title = s;
   // 为了此处扩展需要，将一个 pieChart 置于一个 pieChartPanel 中
   pieChartPanel.addChild(pieChart);
   // 每次遍历将创建完的 pieChart 置于 pieBox 中
   pieBox.addChild(pieChartPanel);
}

var piePanel

anel = new Panel();
piePanel.horizontalScrollPolicy = "off";
piePanel.title = chartXML.dim1label;

// legend 是图 3 右边的指示板
var pieLegendBox:Box = new Box();
pieLegendBox.horizontalScrollPolicy = "off";
pieLegendBox.maxHeight = 250;
var pieLegend

egend = new Legend();
pieLegend.dataProvider = pieChart;

pieLegendBox.addChild(pieLegend);
piePanel.addChild(pieLegendBox);
pieBox.addChild(piePanel);
}

图 3. Pie Chart – customized style

收藏分享评分

回复引用

订阅 TOP

返回列表