amcharts嵌入到flex中

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来指定的。

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

测试的时候最好在服务器上测试，因为一个swf加载另一个swf在本地测试可能失败。

附件中用一个tomcat上可以运行的例子，和两个flex源码。

amcharts嵌入到flex中相关推荐

浅析flex中的焦点focus
一.无焦点的困扰--组件监听不到键盘事件原因:只有获得焦点的组件(确切说是InteractiveObject)才能监听到键盘事件的目标阶段:键盘事件(flash.events.KeyboardEve ...
flex中dataGrid的编辑功能
在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1.datagrid编辑功能简介当我们点 ...
flex中dataGrid的编辑功能精华
from:http://blog.csdn.net/wuyan520/article/details/5469794 也是转载,源头未知. 在flex的dataGrid中,很多情况下列是需要嵌入其他的 ...
flash中制的SWC组件怎样导入到flex中使用
flash中制的SWC组件怎样导入到flex中使用 2010-04-30 11:18 在使用FLASH导出SWC组件文件后,放入项目的LIB文件夹,然后要用实例化一个对象才能进行时操作使用, 但要记得 ...
Flex中如何通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记的例子...
原文 http://blog.minidx.com/2008/12/03/1669.html 接下来的例子演示了Flex中如何通过horizontalTickAligned和verticalTickA ...
百度搜索引擎提供了一段嵌入到页面中的代码
百度搜索引擎提供了一段嵌入到页面中的代码 <form action="http://www.baidu.com/baidu" target="_blank" ...
把控制台程序嵌入到 WinForm 中执行
我们经常有一些用控制台实现的简单应用,这种应用一般都是一步一步"向导"式执行,在每一步上收集用户的输入,最后得到程序执行的结果.但有些用户可能不喜欢用键盘操作的命令行界面,还是愿意 ...
matplotlib嵌入到pyqt中
在pyqt5中使用matplotlib 前言虽然,qt中也提供了绘图函数,但对于初学者并不是很容易掌握,众所周知,matplot提供了简单,易用,强大的绘图函数,结合mumpy基本可以达到matlb ...
python嵌入到C++中
python嵌入到C++中把python嵌入的C++里面需要做一些步骤安装python程序,这样才能使用python的头文件和库在我们写的源文件中增加"Python.h"头文 ...

amcharts嵌入到flex中

amcharts嵌入到flex中相关推荐

最新文章

热门文章