随笔-31  评论-257  文章-0  trackbacks-0
本篇接着上一篇文章,上篇文章中,大家都看到最终效果了,这个例子很简单,我就粗略的讲解一下代码吧
整个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]


posted on 2008-07-29 14:10 姜大叔 阅读(2763) 评论(4)  编辑  收藏 所属分类: Flash/Flex

评论:
# re: [续] 初玩 Flex Chart,简单实例分析![未登录] 2008-10-09 16:42 |
不错,但为何怎么不见你的源码的连接呀!!!
wwj256@163.com望楼主发份给我,谢啦!  回复  更多评论
  
# re: [续] 初玩 Flex Chart,简单实例分析![未登录] 2008-12-22 14:07 |
怎么不能下载源码?
saint1107@163.com望楼主发份给我,谢谢哈  回复  更多评论
  
# re: [续] 初玩 Flex Chart,简单实例分析! 2009-05-22 13:39 | very good!
望楼主发份给我(wangshigeyao@yahoo.com.cn),谢谢哈  回复  更多评论
  
# ok[未登录] 2010-01-20 16:00 | ok
ok  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: