OFC2是很好用的Flash图形库,其中包括的曲线:line,bar(3d,glass等),area,雷达图等,可以利用开源的FlashDevelop编译运行,但在中文支持方面却存在几个问题,比如Y轴无法显示中文等,解决的思路有两个:
修改源码YLegendBase.as文件中的build函数,修改完后如下:
private function build( text:String ): void { var title:TextField = new TextField(); title.x = 0; title.y = 0; this.text = text; title.htmlText = this.text; var fmt:TextFormat = new TextFormat(); fmt.color = this.css.color; fmt.font = this.css.font_family?this.css.font_family:'Verdana'; if (fmt.font == "spArial") { title.embedFonts = true; title.antiAliasType = AntiAliasType.ADVANCED; title.rotation = 270; title.height = title.textHeight; } fmt.bold = this.css.font_weight == 'bold'?true:false; fmt.size = this.css.font_size; fmt.align = "center"; title.setTextFormat(fmt); title.autoSize = "left"; this.addChild(title); }
编译Open Flash Chart II最新版本,系统环境:Linux + Flex_Builder_for_Linux + Eclipse。
1.下载OFC最新版本源码http://teethgrinder.co.uk/open-flash-chart-2/downloads.php(这里下载的是Version 2 Lug Wyrm Charmer (28th,July 2009) )。
2.下载FlashDevelop http://www.flashdevelop.org/community/viewforum.php?f=11 因在ofc中引用了FlashDevelop里的2个包:org和mx (这里为FlashDevelop-3.0.6-RTM.exe)。
3.在Eclipse中新建一ActionScript项目,并命名为open_flash_chart(可自定义名称),然后导入Open Flash Chart的AS源码,该源码位于:open-flash-chart-2-Lug-Wyrm-Charmer/open-flash-chart文件夹下,同时导入FlashDevelop里的org包、mx包到改项目中。
4.下载中文字体Simsun.ttf,同样导入到open_flash_chart目录里。
5.下载Base64Encoder编码解码类,OFC里自带的Base64Encoder.as有问题,会导致编译时产生1162错误(Function does not have a body),下载后直接覆盖open_flash_chart/mx/utils/Base64Encoder.as即可,下载地址:http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/utils/Base64Encoder.as。
6.嵌入我们的中文字体,共两处:
第一处:open_flash_chart/elements/axis/XAxisLabels.as 找到源码中这一行: [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')] 注释掉该行并在下一行加入:[Embed(source = '/home/guangmean/workspace/open_flash_chart/simsun.ttf', fontFamily = 'SimSun')]
第二处:open_flash_chart/elements/labels/YLegendBase.as 找到源码中这一行: [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')] 同上,注释掉该行并在下一行加入:[Embed(source = '/home/guangmean/workspace/open_flash_chart/simsun.ttf', fontFamily = 'SimSun')]
7.经过步骤6我们就已经导入了中文字体,但是现在的X坐标中的中文还不会旋转(表现为X坐标的值都不见了)。为此我们还需要再次修改第6步中的XAxisLabels.as和YLegendBase.as源代码:将XAxisLabels.as中make_label()方法里的fmt.font = "spArial"改为fmt.font = "SimSun",YLegendBase.as文件一样。
以下为可选步骤:
8.修改open_flash_chart/Loading.as文件,将dots:Number调整为一个合适的整数,spin.graphics.drawCircle(x,y,3)中的数字3可自行调整,调整后的效果就是Loading data...后的加载圆圈变漂亮了(原理很简单,根据三角函数和圆周率调整轨迹)。
9.修改open_flash_chart.as文件this.load_external_file(file);的上一行:var file:String = "../../data-files/*.txt";将"../../data-files/*.txt"替换为一个合适文件路径(这样做的目的是防止Web应用时ofc在获取数据失败是可以到你指定的地方读取默认数据,改善用户体验)。
10.Error # 2032 with https in IE(Test under IE6 IE7),参考:http://forums.codecharge.com/posts.php?post_id=97771
header("Cache-Control: cache, must-revalidate");
header("Pragma: public");
OK!!! 打完收工