FlashBuilder 4 编译 Open Flash Chart 源码

首先参考:http://u.hooto.com/guangmean/blog/view/5213.html

注:附件中包含图片、main 工程等

1.工具:
FlashBuilder_4_Plugin_LS10(适用MyEclipse):http://trials.adobe.com/AdobeProducts/FLBR/4/win32/FlashBuilder_4_Plugin_LS10.exe
MyEclipse 8.5_32位(http://www.blogjava.net/xiangjava/archive/2010/05/15/321026.html)
FlashPlayer_Debug 插件:(主页:http://www.adobe.com/support/flashplayer/downloads.html?PID=5677334#fp11)
IE:http://fpdownload.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_ax_debug_32bit.exe
(注:我使用的是版本FlasyPlayer10:http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_ax_debug.exe)
Chrome(我当前使用):http://fpdownload.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_plugin_debug_32bit.exe

卸载FlashPlayer_Debug插件工具,如果觉得安装调试插件有问题,直接卸了它重装
Win7(64位)
Jdk1.6(32位)
FlashDevelop 3.3.4 (http://www.flashdevelop.org/downloads/releases/FlashDevelop-3.3.4-RTM.exe)
OPen Flash Chart(OFC)源码(Version 2 Lug Wyrm Charmer (28th, July 2009)):
直接下载地址(打开后,稍等几秒钟,会自动下载,下载后的文件是:open-flash-chart-2-Lug-Wyrm-Charmer.zip):
http://sourceforge.net/projects/openflashchart/files/latest/download?source=files
如果不行,点击:http://sourceforge.net/projects/openflashchart/files/
2.安装
JDK1.6、
MyEclipse 8.5、
FlashBuilder_4_Plugin_LS10
(安装教程:http://wenku.baidu.com/view/90c61ac2d5bbfd0a79567304.html
安装目录:F:\SoftWare\Fixation\Adobe Flash Builder 4 Plug-in)、
FlashPlayer_Debug 插件
FlashDevelop 3.3.4 (我所安装的路径是:F:\SoftWare\Fixation\FlashDevelop3.3.4)
3.新建ActionScript项目,建议工程名为 main,
  工程路径:E:\Project\Example\main
 
  如图:1_新建ActionScript项目.jpg

4.解压 OFC 源代码 包:open-flash-chart-2-Lug-Wyrm-Charmer.zip,
  解压路径:F:\SoftWare\Work\Flex\报表框架\OpenFlashChart\源码\
  如图:2_解压OFC包.jpg

  要使用的目录有两个:
open-flash-chart :源码工程,包含所有源码
data-files       : 显示图表的文件,比如要显示饼图,则调用此目录下的一个文件即可
5.把open-flash-chart目录下的所有文件和 data-files 目录 拷到 main 工程下的src目录下,
  注:MyEclipse 工具会提示:main.as 已经存在,是否覆盖 ,点击 : YES TO ALL

  会提示11个错误
  如图:3_拷入源代码致工程.jpg

6.解决错误:
   A.打开文件:elements.axis.XAxisLabels.as  找到错误行:
      原文:[Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')]
      替换为:[Embed(source = 'C:\\Windows\\Fonts\\Arial.ttf', fontName = 'spArial', mimeType = 'application/x-font')]
      验证目录:C:\Windows\Fonts\Arial
      消除 1 个错误
  
   B.打开文件:elements.labels.YLegendBase.as  找到错误行:
      原文:[Embed(systemFont='Arial', fontName='spArial', mimeType='application/x-font')]
      替换为:[Embed(source = 'C:\\Windows\\Fonts\\Arial.ttf', fontName = 'spArial', mimeType = 'application/x-font')]
      消除 1 个错误

   C.打开FlashDevelop目录:F:\SoftWare\Fixation\FlashDevelop3.3.4\Library\AS3\classes
     把 org 整个目录拷入 工程下的 src 目录下
     消除 5 个错误
   
   D.在 src 目录下创建包:mx.utils
     打开  FlashBuilder_4_Plugin_LS10  工具目录:
     F:\SoftWare\Fixation\Adobe Flash Builder 4 Plug-in\sdks\4.1.0\frameworks\projects\framework\src\mx\utils\
     把 Base64Encoder.as 文件拷入 工程下的 src 下的 mx.utils 包中
     消除 3 个错误

   E.在 src 目录下创建包:mx.states
     打开FlashBuilder_4_Plugin_LS10目录下的文件:
     F:\SoftWare\Fixation\Adobe Flash Builder 4 Plug-in\sdks\4.1.0\frameworks\projects\framework\src\mx\states\
     把 SetProperty.as 文件拷入 工程下的 src 下的 mx.states 包中
     消除 1 个错误

     至此,11个错误全部消除 如图:4_消除错误.jpg

7.启动程序:
    打开 src 目录的 main.as 文件,找到此行:var file:String = "../../data-files/y-axis-auto-steps.txt";  (应该是98行)
    此行是调用 data-files 下的数据文件(会报2032 找到文件错误),也就是展示不同图表的地方,此处不同,

    因为,data-files 目录在 src 下,main.as 也在 src 下,所以,去掉  ../../ 即可,结果为:
    var file:String = "data-files/y-axis-auto-steps.txt";
    右键:Debug As->Web 应用程序,随后浏览器自动打开窗口,显示图表,如图:5_运行结果.jpg

    大功靠成,接下来就可以为所欲为了

8.显示不同图形:
   方法1:打开 src/data-files 目录,复制任一 一个TXT文件的文件名,然后替换 上面的 main.as 文件中的 "y-axis-auto-steps.txt" 字符串 ,刷新即可

   方法2:打开  data-files/y-axis-auto-steps.txt 文件,
   在附件中找到 explorer_OpenFlashChart所有Example.swf  ,任意选择一个图表,如:H Bar ,把左下角的JSON 文本粘贴到
   y-axis-auto-steps.txt 文件中,刷新浏览器即可看到H Bar 图表

   有疑问,联系QQ:123296959





你可能感兴趣的:(源码,Flex,ofc,OpenFlash,FlashBuilder 4)