[续] 初玩 Flex Chart，简单实例分析！

[续] 初玩 Flex Chart，简单实例分析！

本篇接着上一篇文章，上篇文章中，大家都看到最终效果了，这个例子很简单，我就粗略的讲解一下代码吧
整个Flex程序，就两个Panel面板，将控件都排放好到Panel里面，之后定好相应的属性，我主要解析一下下面的代码：

 1  < mx:Script >
 2           <! [CDATA[
 3           // 导入需要用到的类
 4           import  mx.utils.Base64Encoder;
 5           import  mx.collections.ArrayCollection;
 6           import  mx.controls.Alert;
 7           import  com.adobe.images.PNGEncoder;
 8         
 9           // 这里定义一个ArrayCollection 这就是PieChart控件所需要的dataProvider,并赋好初值
10          [Bindable]
11           private  var mydata:ArrayCollection  =   new  ArrayCollection([
12              {name:  " 非常满意 " ,num:  1 },
13              {name:  " 满意 " ,num:  1 },
14              {name:  " 普通 " ,num:  1 },
15              {name:  " 不满意 " ,num:  1 },
16              {name:  " 非常不满意 " ,num:  1 }
17          ]);
18         
19           // 方法为PieChart控件自动调用的，是用于当图表要显示Label时，将会调用该方法，并传上相应的参数，这样，你就可以在该方法里自已处理好要显示的数据，再返回给Chart显示
20           private  function showLabel(data:Object, field:String, index:Number, percentValue:Number):String{
21               return  data.name  +   " : "   +  data.num  +   " \n "   +  Math.round(percentValue)  +   " % " ;
22          }
23         
24           // 该方法是当点击“确定”按钮时调用的，用于改变图表数据的ArrayCollection里的数据，再更新图表显示
25           private  function changeData(ent:Event): void {
26               // 定一个临时的集合用于放置数据
27              var temp:ArrayCollection  =   new  ArrayCollection();
28               // 判断用户所填的数据是否为空，如果为空的就不要加进集合里了，免得图表出现一些无谓的Label，下同
29               if (resu0.text  !=   "" ){
30                  temp.addItem({name:  " 非常满意 " ,num: resu0.text});
31              }
32               if (resu1.text  !=   "" ){
33                  temp.addItem({name:  " 满意 " ,num: resu1.text});
34              }
35               if (resu2.text  !=   "" ){
36                  temp.addItem({name:  " 普通 " ,num: resu2.text});
37              }
38               if (resu3.text  !=   "" ){
39                  temp.addItem({name:  " 不满意 " ,num: resu3.text});
40              }
41               if (resu4.text  !=   "" ){
42                  temp.addItem({name:  " 非常不满意 " ,num: resu4.text});
43              }
44              panel1.title  =  subjectTitle.text;
45               /*
46              mydata[0].num = resu0.text;
47              mydata[1].num = resu1.text;
48              mydata[2].num = resu2.text;
49              mydata[3].num = resu3.text;
50              mydata[4].num = resu4.text;
51               */
52              pc.dataProvider  =  temp;
53          }
54         
55           // 这里是截图的方法函数，参照于国外某高手地Flex截图方面的代码
56           private  function catchPic(ent:Event): void {
57               // 根据要截图的Panel的大小建立一个放置位图数据的BitmapData对象
58              var bitmapData:BitmapData  =   new  BitmapData(panel1.width,panel1.height, true , 0xffffff );
59               // 用现时panel1对象的位图信息填充到bitmapData对象中
60               // 由于每一个DisplayObject对象都有自已的用于显示的位图色彩信息，
61               // 所以很多继承了DisplayObject的类都可以填充到bitmapData对象中处理，如模糊处理等
62              bitmapData.draw(panel1);
63               // 用PNGEncoder类对位图信息进行压缩转换处理才得以输出PNG图片格式数据
64              var bytes:ByteArray  =  PNGEncoder.encode(bitmapData);
65               // 再将数据进行编码，用于在JavaScript中向浏览器传播
66               // 最后调用JavaScript来打开新窗口来显示图借数据
67              var b64encoder:Base64Encoder  =   new  Base64Encoder();
68              b64encoder.encodeBytes(bytes);
69              ExternalInterface.call( " showPic " ,b64encoder.flush(),panel1.width + 25 ,panel1.height + 25 );
70          }
71          ]] >
72  </ mx:Script >

JavaScript方面要写上以下函数：

1  function showPic(img,width,height){
2      window.open( " data:image/png;base64, "   +  img, "" , " width= " + width + " ,height= " + height + " ,resizable=1 " );
3  }

以上有几点应该要注意：
注意PieChart的dataProvider的写法，也就是ArrayCollection的写法，这与很多控件的dataProvider的都一样，比如DataGrid控件。
注意，PNGEncoder类不是Flex原本自带的，是要另外自已下载的扩展包，在com.adobe.images里面，是Adobe发布的核心扩展类库，更多的类库，大家可以在网上找找。

以下放出完整的源代码：[down=attachments/month_0710/92007102323188.rar]点击下载此文件[/down]