amcharts嵌入到flex中

最新推荐文章于 2013-12-12 22:01:59 发布

最新推荐文章于 2013-12-12 22:01:59 发布 · 214 阅读

文章标签：

#Flex #Flash #JavaScript #Firebug #XML #ViewUI

本文介绍了一种将Amcharts图表嵌入Flex应用程序的方法。通过创建AmchartsLoader类并使用特定URL参数加载Amcharts SWF文件，实现了图表的动态加载。此外，还提供了一个测试按钮以验证集成的成功。

amcharts是比较优秀的图表制作工具，它的效果是其他图表工具所无法比拟的。但是amcharts只给我们提示一组图表的控件，没有给我们良好的控制组件和其他的表现形式，但是flex却有丰富的组件可用，包括截图，动态加载图表。

这里先把flex嵌amcharts的实现写出来吧。这是受amcharts可视化配置的启示实现的。

1.先上amcharts的网站上体验一下吧。http://extra.amcharts.com/editor/column/ (这里是柱图)，可以得到至少两个启示:

amcharts官网上的可视化配置界面，左边都是flex控件

这是用firebug查看到的请求信息

a)这里flex是通过下面的地址来访问amcharts来访问的

“http://extra.amcharts.com/editor/column/charts/amcolumn.swf?connection_id=amchartscolumn1246975480718&flash_width=600&flash_height=400&data_file=data/sample_data/column.xml&path=data/”

于是下面也将用这种方式来加载amcharts。

b)里面有一个amcharts_key.txt是用来让那个超链消失的，也就是说我们可以获得一个key。只要将这个文件放在你的指定的path路径下面就行了。

2.在flex里写好用来嵌入amcharts的mxml。

加载amcharts的类，AmchartsLoader.as

package com.xvxv.aclass
{
	import mx.controls.SWFLoader;
	import mx.managers.SystemManager;
	
	public class AmchartsLoader extends SWFLoader
	{
		import mx.controls.SWFLoader;
		private var _swfUrl:String = "";
		private var _path:String = "";
		private var _settingsFile:String = "";
		private var _dataFile:String = "";
		public function AmchartsLoader()
		{
			super();
		}
		
		public function set swfUrl(swfUrl:String):void{
			while(swfUrl.indexOf("&")!=-1) swfUrl = swfUrl.replace("&", "%26");
			this._swfUrl = swfUrl;
		}
		
		public function set path(path:String):void{
			while(path.indexOf("&")!=-1) path = path.replace("&", "%26");
			this._path = path;
		}
		
		public function set settingsFile(settingsFile:String):void{
			while(settingsFile.indexOf("&")!=-1) settingsFile = settingsFile.replace("&", "%26");
			this._settingsFile = settingsFile;
		}
		
		public function set dataFile(dataFile:String):void{
			while(dataFile.indexOf("&")!=-1) dataFile = dataFile.replace("&", "%26");
			this._dataFile = dataFile;
		}

		public function loadChart():void{
			load(_swfUrl+"?path="+_path+"&settings_file="+_settingsFile+"&data_file="+_dataFile);
		}
	}
}

嵌入amcharts的mxml，amchartflex.mxml：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" 
	layout="absolute" backgroundAlpha="0" backgroundColor="#FFFFFF" 
	xmlns:ns1="com.xvxv.aclass.*">
	<mx:Style>
		Application{
			font-size:12px;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.controls.Label;
			import mx.controls.Alert;
			import com.xvxv.aclass.AmchartsLoader;
			
			private function init():void{
				var amchartsLoader:AmchartsLoader = new AmchartsLoader();
				amchartsLoader.percentWidth = 100;
				amchartsLoader.percentWidth = 100;
				amchartsLoader.swfUrl = Application.application.parameters["swf_url"];
				amchartsLoader.path = Application.application.parameters["path"];
				amchartsLoader.dataFile = Application.application.parameters["data_file"];
				amchartsLoader.settingsFile = Application.application.parameters["settings_file"];
				this.addChild(amchartsLoader);
				amchartsLoader.loadChart();

				var button:Button = new Button();
				button.x = 10;
				button.y = this.height - 50;
				button.label = "button in flex!";
				button.addEventListener(MouseEvent.CLICK,function():void{
					Alert.show("这个按扭是flex里的，这个图是amcharts做的！","提示");
				});
				this.addChild(button);
			}
		]]>
	</mx:Script>

</mx:Application>

在AmchartsLoader是SwfLoader的子类，只是在里面添加了几个属性而已，swfUrl用来指定加载的amcharts的swf实例的中径，本例中用的是amcolmun.swf，也就是柱图，dataFile与settingsFile分别是数据文件的路径与配置文件的路径，与amcharts中一致，不用说明。然后多了一个方法，就是用拼接url的方式将所有和外部参数传入swf中，这是借签了amcharts网站上的可视化配置器。

在amchartflex.mxml中新建了一个AmchartsLoader类，并简单的设置了他们的属性，其中swf_url,path,data_file,settings_file都是从外部获得的参数，然后添加到应用上，下面用一个按扭是为了测试而用的。

OK一个完整的可加载amcharts的swf就生成了，在bin-debug中找到amchartflex.swf，就是我们想要得到的amcharts加载器。

3.如何加载

先把amchartflex.swf拷到你的amcolumn文件夹下。

这里只要改一下原来的html页面就可以了，下面以amcolumn.html为例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Column & Bar chart</title>
</head>

<body>
  <script type="text/javascript" src="amcolumn/swfobject.js"></script>
	<div id="flashcontent">
		<strong>You need to upgrade your Flash Player</strong>
	</div>

	<script type="text/javascript">
		// <![CDATA[
		/**原本的内容
		var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "400", "8", "#FFFFFF");
		**/
		
		//下面两行是新的内容
		var so = new SWFObject("amchartflex.swf", "amcolumn", "520", "400", "8", "#FFFFFF");
		so.addVariable("swf_url", "amcolumn/amcolumn.swf");

		so.addVariable("path", "amcolumn/");
		so.addVariable("settings_file", encodeURIComponent("amcolumn/amcolumn_settings.xml"));
		so.addVariable("data_file", encodeURIComponent("amcolumn/amcolumn_data.xml"));
		so.write("flashcontent");

		// ]]>
	</script>
</body>
</html>

从上面可以看到只要修改一个地方就OK了，原来加载的是amcolumn.swf而现在加载的是amchartflex.swf，amcolumn.swf是通过swf_url来指定的。

下面是效果，当点击按钮时弹出的对话框。