Flex和JavaScript之间的交互
1.AS代码
View Code
1 <?xml version="1.0" encoding="utf-8"?>
2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" height="1246" width="1219" applicationComplete="initApp(event);">
5 <s:layout>
6 <s:BasicLayout/>
7 </s:layout>
8 <fx:Style>
9 @namespace s "library://ns.adobe.com/flex/spark";
10 @namespace mx "library://ns.adobe.com/flex/mx";
11 #bubblechart,#barchart,#pieChart
12 {
13 fontFamily:Arial;
14 fontSize:15;
15 color:#FF0033;
16 }
17 #colChart
18 {
19 gutterLeft:80;
20 gutterRight:50;
21 gutterBottom:50;
22 paddingTop:20;
23 }
24 </fx:Style>
25 <fx:Script>
26 <![CDATA[
27 import mx.collections.ArrayCollection;
28 import mx.events.FlexEvent;
29 import mx.utils.URLUtil;
30
31 [Bindable]
32 public var _VLineChart:Boolean = false;//线图
33 [Bindable]
34 public var _VAreaChart:Boolean = false;//区域图表
35 [Bindable]
36 public var _VPieChart:Boolean = true;//饼图
37 [Bindable]
38 public var _VBarChart:Boolean = false;//条形图表
39 [Bindable]
40 public var _VBubbleChart:Boolean = false;//泡沫图表
41 [Bindable]
42 public var _VColumnChart:Boolean = false;//混合型图表
43
44 [Bindable]
45 public var expenses:ArrayCollection = new ArrayCollection(
46 [
47 {Month:"一月",Profit:2000,Expenses:1500,Amount:450},
48 {Month:"二月",Profit:1000,Expenses:200,Amount:600},
49 {Month:"三月",Profit:1500,Expenses:500,Amount:300},
50 {Month:"四月",Profit:1200,Expenses:300,Amount:300},
51 {Month:"五月",Profit:1600,Expenses:600,Amount:300},
52 {Month:"六月",Profit:1800,Expenses:700,Amount:300},
53 {Month:"七月",Profit:1300,Expenses:320,Amount:300},
54 ]
55 );
56
57 // 用于混合型图表的数据
58 [Bindable]
59 public var SMITH:Array = [
60 {date:"2008-08-22",point:45.87},
61 {date:"2008-08-23",point:45.74},
62 {date:"2008-08-24",point:45.77},
63 {date:"2008-08-25",point:46.06}
64 ];
65
66 [Bindable]
67 public var DECKER:Array = [
68 {date:"2008-08-22",point:45.59},
69 {date:"2008-08-23",point:45.3},
70 {date:"2008-08-24",point:46.71},
71 {date:"2008-08-25",point:46.88}
72 ];
73
74 protected function initApp(event:FlexEvent):void
75 {
76 var params:Object = mx.core.Application.application.parameters;
77
78 _VLineChart = getBoolean(params,"LineChart",false);//线图
79 _VAreaChart = getBoolean(params,"AreaChart",false);//区域图表
80 _VPieChart = getBoolean(params,"PieChart",true);//饼图
81 _VBarChart = getBoolean(params,"BarChart",false);//条形图表
82 _VBubbleChart = getBoolean(params,"BubbleChart",false);//泡沫图表
83 _VColumnChart = getBoolean(params,"ColumnChart",false);//混合型图表
84
85 //expenses = params["expenses"];
86 //SMITH = params["Smith"];
87 //DECKER = params["Decker"];
88
89 ExternalInterface.addCallback("setVisibleStatus", setVisibleStatus);
90 }
91
92 private function getString(params:Object, name:String, def:String):String{
93 if(params[name] != null){
94 return params[name];
95 }
96 return def;
97 }
98
99 private function getNumber(params:Object, name:String, def:Number):Number{
100 if(params[name] != null){
101 return params[name];
102 }
103 return def;
104 }
105
106 private function getBoolean(params:Object, name:String, def:Boolean):Boolean{
107 if(params[name] != null){
108 return params[name] == "true";
109 }
110 return def;
111 }
112
113 public function setVisibleStatus(Str:String):void{
114 var status:Object =URLUtil.stringToObject(Str,";",true) ;
115 lbTest.text = status[0].LineChart + status[0].AreaChart + status[0].PieChart + status[0].BarChart + status[0].BubbleChart + status[0].ColumnChart;
116 _VLineChart = getBooleanStr(status[0].LineChart);
117 _VAreaChart = getBooleanStr(status[0].AreaChart);
118 _VPieChart = getBooleanStr(status[0].PieChart);
119 _VBarChart = getBooleanStr(status[0].BarChart);
120 _VBubbleChart = getBooleanStr(status[0].BubbleChart);
121 _VColumnChart = getBooleanStr(status[0].ColumnChart);
122 }
123
124 private function getBooleanStr(value:Object):Boolean{
125 var str = value.toString().substring(1,value.toString().length-1);
126 return str == "true" ? true : false;
127 }
128
129 private function formatStr(value:Object):String{
130 return value.toString().substring(1,value.toString().length-1);
131 }
132
133 ]]>
134 </fx:Script>
135 <fx:Declarations>
136 <!-- 将非可视元素（例如服务、值对象）放在此处 -->
137 </fx:Declarations>
138 <s:BorderContainer borderVisible="false">
139 <s:Label text="TEST" id="lbTest" width="100">
140
141 </s:Label>
142 <!-- 线图 -->
143 <mx:Panel title="线图" width="322" height="323" visible="{_VLineChart}" includeInLayout="{_VLineChart}">
144 <mx:LineChart id="lineChart" dataProvider="{expenses}" showDataTips="true" width="272" height="224">
145 <mx:horizontalAxis>
146 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
147 </mx:horizontalAxis>
148 <mx:series>
149 <mx:LineSeries yField="Profit" displayName="利润"/>
150 <mx:LineSeries yField="Expenses" displayName="费用"/>
151 </mx:series>
152 </mx:LineChart>
153 <mx:Legend dataProvider="{lineChart}"/>
154 </mx:Panel>
155
156 <!-- 饼图 -->
157 <s:Panel width="329" height="324" title="饼图" visible="{_VPieChart}" includeInLayout="{_VPieChart}">
158 <mx:PieChart x="79" y="61" id="pieChart" dataProvider="{expenses}" showDataTips="true" width="212" height="205">
159 <mx:series>
160 <mx:PieSeries displayName="Series 1" field="Expenses" nameField="Month" labelField="利润"/>
161 </mx:series>
162 </mx:PieChart>
163 <mx:Legend dataProvider="{pieChart}"/>
164 </s:Panel>
165
166 <!-- 区域图表 -->
167 <mx:Panel title="区域图表" width="307" height="321" visible="{_VAreaChart}" includeInLayout="{_VAreaChart}">
168 <!-- showDataTips表示鼠标移动到该点上会显示提示信息 -->
169 <mx:AreaChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="262" height="215">
170 <mx:horizontalAxis>
171 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
172 </mx:horizontalAxis>
173 <mx:series>
174 <mx:AreaSeries yField="Profit" displayName="利润"/>
175 </mx:series>
176 </mx:AreaChart>
177 <mx:Legend dataProvider="{myChart}"/>
178 </mx:Panel>
179
180 <!-- 条形图表 -->
181 <s:Panel width="320" height="466" title="条形图表" visible="{_VBarChart}" includeInLayout="{_VBarChart}">
182 <mx:BarChart x="10" y="52" id="barchart" width="292" height="350" dataProvider="{expenses}" showDataTips="true">
183 <mx:verticalAxis>
184 <mx:CategoryAxis dataProvider="{expenses}" categoryField="Month"/>
185 </mx:verticalAxis>
186 <mx:series>
187 <mx:BarSeries displayName="利润" xField="Profit" yField="Month"/>
188 <mx:BarSeries displayName="费用" xField="Expenses" yField="Month"/>
189 </mx:series>
190 </mx:BarChart>
191 <mx:Legend dataProvider="{barchart}"/>
192 </s:Panel>
193
194 <!-- 泡沫图表 -->
195 <s:Panel width="341" height="470" title="泡沫型图表" visible="{_VBubbleChart}" includeInLayout="{_VBubbleChart}">
196 <mx:BubbleChart x="22" y="69" id="bubblechart" width="295" height="329"
197 minRadius="1" maxRadius="50" dataProvider="{expenses}" showDataTips="true">
198 <mx:series>
199 <mx:BubbleSeries displayName="Profit" xField="Profit" yField="Expenses" radiusField="Amount"/>
200 </mx:series>
201 </mx:BubbleChart>
202 <mx:Legend dataProvider="{bubblechart}"/>
203 </s:Panel>
204
205 <!-- 混合型图表 -->
206 <s:Panel width="360" height="469" title="混合型图表" visible="{_VColumnChart}" includeInLayout="{_VColumnChart}">
207 <mx:ColumnChart id="colChart" dataProvider="{SMITH}" showDataTips="true" width="332">
208 <mx:horizontalAxis>
209 <mx:CategoryAxis categoryField="date"/>
210 </mx:horizontalAxis>
211 <mx:verticalAxis>
212 <mx:LinearAxis minimum="45" maximum="47"/>
213 </mx:verticalAxis>
214 <mx:series>
215 <mx:ColumnSeries dataProvider="{SMITH}" xField="date" yField="point" displayName="SMITH">
216 </mx:ColumnSeries>
217 <mx:LineSeries dataProvider="{DECKER}" xField="date" yField="point" displayName="DECKER">
218 </mx:LineSeries>
219 </mx:series>
220 </mx:ColumnChart>
221 </s:Panel>
222 </s:BorderContainer>
223 </s:Application>
2.JavaScript代码
View Code
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ShowChart._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 <style type="text/css">
8 img
9 {
10 border: 0px;
11 }
12 </style>
13
14 <script type="text/javascript" src="swfobject.js"></script>
15
16 <script type="text/javascript">
17 var docViewer;
18
19 function getDocViewer() {
20 if (docViewer)
21 return docViewer;
22 else if (document.FlexChart)
23 return document.FlexChart;
24 else
25 return null;
26 }
27
28 var swfVersionStr = "10.0.0";
29 var xiSwfUrlStr = "playerProductInstall.swf";
30 var flashvars = {
31 LineChart: "false",
32 AreaChart: "false",
33 PieChart: "true",
34 BarChart: "false",
35 BubbleChart: "false",
36 ColumnChart: "false"
37 };
38 var params = {};
39 params.quality = "high";
40 params.bgcolor = "#ffffff";
41 params.allowscriptaccess = "sameDomain";
42 params.allowfullscreen = "true";
43
44 var attributes = {};
45 attributes.id = "FlexChart";
46 attributes.name = "FlexChart";
47 attributes.align = "middle";
48 swfobject.embedSWF(
49 "FlexChart.swf", "flashContent",
50 "389", "509",
51 swfVersionStr, xiSwfUrlStr,
52 flashvars, params, attributes);
53 swfobject.createCSS("#flashContent", "display:block;text-align:left;");
54
55 function SetVStatus() {
56 var array = new Array(6);
57 var controls = document.getElementsByName("ckChart");
58 for (i = 0; i < controls.length; i++) {
59 array[i] = controls[i].checked ? "true" : "false"
60 }
61
62 var str = '0.LineChart="' + array[0] + '";0.AreaChart="' + array[1] + '";0.PieChart="' + array[2] + '";'
63 + '0.BarChart="' + array[3] + '";0.BubbleChart="' + array[4] + '";0.ColumnChart="' + array[5] + '";';
64
65 getDocViewer().setVisibleStatus(str);
66 }
67
68 function getDatasource() {
69 // {Month:"一月",Profit:2000,Expenses:1500,Amount:450},
70 // {Month:"二月",Profit:1000,Expenses:200,Amount:600},
71 // {Month:"三月",Profit:1500,Expenses:500,Amount:300},
72 // {Month:"四月",Profit:1200,Expenses:300,Amount:300},
73 // {Month:"五月",Profit:1600,Expenses:600,Amount:300},
74 // {Month:"六月",Profit:1800,Expenses:700,Amount:300},
75 // {Month:"七月",Profit:1300,Expenses:320,Amount:300},
76 var str = '0.Month="一月";0.Profit=2000;0.Expenses:1500;0.Amount=450;';
77 str += '1.Month="二月";1.Profit=1000;1.Expenses:200;1.Amount=600;';
78 str += '2.Month="三月";2.Profit=1500;2.Expenses:500;2.Amount=300;';
79 str += '3.Month="四月";3.Profit=1200;3.Expenses:300;3.Amount=300;';
80 str += '4.Month="五月";4.Profit=1600;4.Expenses:600;4.Amount=300;';
81 str += '5.Month="六月";5.Profit=1800;5.Expenses:700;5.Amount=300;';
82 str += '6.Month="七月";6.Profit=1300;6.Expenses:320;6.Amount=300;';
83 }
84
85 function SetChecked(sender) {
86 var status = sender.checked;
87 var controls = document.getElementsByName("ckChart");
88 for (i = 0; i < controls.length; i++) {
89 controls[i].checked = false;
90 }
91 sender.checked = status;
92
93 SetVStatus();
94 }
95 </script>
96
97 </head>
98 <body>
99 <div id="flashContent" style="float: left;">
100 <p>
101 To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
102 </p>
103
104 <script type="text/javascript">
105 var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
106 document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
107 + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>");
108 </script>
109
110 </div>
111 <div style="float: left; width: 30%">
112 <div>
113 <table>
114 <tr>
115 <td style="width: 100px;">
116 线图：<input type="checkbox" id="ckLine" name="ckChart" onclick="SetChecked(this);" />
117 </td>
118 <td style="width: 100px;">
119 区域图：<input type="checkbox" id="ckArea" name="ckChart" onclick="SetChecked(this);" />
120 </td>
121 </tr>
122 <tr>
123 <td>
124 饼图：<input type="checkbox" id="ckPie" name="ckChart" onclick="SetChecked(this);" checked="checked" />
125 </td>
126 <td>
127 条形图：<input type="checkbox" id="ckBar" name="ckChart" onclick="SetChecked(this);" />
128 </td>
129 </tr>
130 <tr>
131 <td>
132 泡沫图：<input type="checkbox" id="ckBubble" name="ckChart" onclick="SetChecked(this);" />
133 </td>
134 <td>
135 混合型图：<input type="checkbox" id="ckColumn" name="ckChart" onclick="SetChecked(this);" />
136 </td>
137 </tr>
138 </table>
139 </div>
140 <div>
141 <textarea id="datasource" rows="10" style="width: 200px;">
142 </textarea>
143 </div>
144 </div>
145 </body>
146 </html>
需要用到swfobject.js
