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_components_1.8.1 和开发示例
amcharts for flex 最后更新版本,此项目已于两年前停止维护,上传版本为停维前最新版本
amcharts flex帮助文档,里边包含了amcharts饼状图、线状图、柱状图、等一些保镖图形的事例;
flex 图表
amcharts_flex_components_1.8.3.2 也是flex报表工具之一,很小易用很方便! flex的三大几个常用的报表工具分别是: Ilog IBM公司收费的 amcharts openflashchart FusionCharts
非常棒的flex图表3d控件,amcharts
破解后的swc文件,选择CYC标签 博文链接:https://aimy-2012.iteye.com/blog/1890944
amcharts柱状图配置中文解析.pdf
amcharts flex component
flex amCharts图表的第三方工具包,希望能帮到大家。
amcharts折线图配置中文解析,实用中文注释。
flex偶就是对方立即按时到了房间里看的份简历上打击反垃圾是对方立即拉斯的房间离开的房间拉斯加对方立即按时到了房间了速度快放假是对方看了地方
amcharts中柱状图配置中文解析
-- 设置当鼠标移到切片时,切片是否变亮,或则变暗[0] (from -255 to 255) The pie slice may darken/lighten when the use rolls over it. The intensity may be set here --> <gradient></gradient> <!-- ...
如果想用flex 第三方图表展示工具的话,这个图表工具还是不错的。
AmCharts Docs基于官方网址制作: http://docs.amcharts.com/javascriptchart
非常不错的amcharts入门示例代码 可在半小时内学会简单实用amcharts并将其嵌入系统
amcharts 绿色版