如何使ofc2的Y轴支持中文

OFC2是很好用的Flash图形库,其中包括的曲线:line,bar(3d,glass等),area,雷达图等,可以利用开源的FlashDevelop编译运行,但在中文支持方面却存在几个问题,比如Y轴无法显示中文等,解决的思路有两个:

  1. 将中文字符如simsun.ttc加入到Flash工程中,编译进Flash文件,这样就会存在一个问题,由于字体库足有10M,所以编译后的Flash文件将会变得非常庞大,足有10M左右,故弃之。
  2. 另一解决思路是将Y轴显示的旋转功能去掉,这样就可以显示中文了,而且编译后的Flash文件将会维持在200K左右,而且用户体验方面也都比较OK,所以本文采用这个解决思路

修改源码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);
		}

下面是如何将字体文件打包进swf:

编译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!!! 打完收工

你可能感兴趣的:(如何使ofc2的Y轴支持中文)