http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/

Open Flash Chart（OFC）是一个开源的 Flash 图表绘制工具，提供了各种程序接口的数据生成方式，包括 PHP、Ruby、Perl、Python、Java、.Net、AS、JS 等，OFC 2.0 提供了对 JSON 格式数据的支持。通过 Flash 展示的功能，很简单的就生成一份直观形象的数据统计图表，是制作 Flash 图形报表的不错开源工具。

OFC 的出现，源自作者作为客户经历的一个不愉快的故事。OFC 的作者曾经使用了某个公司开发的 Flash 图表软件，但在使用时出现了一个问题，于是作者写信去询问什么时候可以解决这个问题。令作者感到不愉快的是，过了三四个星期都没有得到答复。作者想，他应该学习下Flash 和 Actionscript，自己写一个软件来用。因此，OFC 出现了！作者把 OFC 放到 sourceforge，作为一个免费的开源软件来发布。作者最后说，千万不要招惹你的客户 (don't piss off your customers) 。

Open Flash Chart 提供了很强大的图形报表绘制功能，依赖于 Flash，使得图形美观、流畅，具有很好的动态效果，因此，越来越受开发人员和用户的欢迎。

Open Flash Chart 所支持的统计样式比较丰富，包括： Line Chart，Bar Chart，Sketch Bar Chart, Horizontal Bar Chart, Stacked Bar Chart, Area Chart, Pie Chart, Scatter Chart, Radar Chart 等等。下面是部分样式的示例图。
图 1. OFC 部分样式的示例图

回页首

Open Flash Chart 在 Web 上的应用

目前，Open Flash Chart 主要应用在 Web 开发上，实现了很好的图形效果。OFCGWT 项目是Google在 Web 方面应用 OFC 的一个实例。OFCGWT 基于 Open Flash Chart 2 开发，用于GWT 应用的开源图表制作组件。

Web 开发中，主要使用下面两个文件，

  • open-flash-chart.swf: Flash 文件接口，通过该文件来生成 Flash 文件，备页面调用(在 web 目录下，与 WEB-INF 目录并级)。
  • swfobject.js: Flash 文件依赖的 JS 文件(在 web 目录下，与 WEB-INF 目录并级)。

调用 open-flash-chart.swf

首先在页面中编写 script 脚本,保存页面为 chart.html。
清单 1. chart.html

<html>

<head>

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">

swfobject.embedSWF("open-flash-chart.swf", "my_chart", "250", "200", "9.0.0");

</script>

</head>

<body>

<p>Hello World</p>

<div id="my_chart"></div>

</body>

</html>

编写 JSON 数据

其次，编写图表的 JSON 文本，将该文本保存为 data.json, 放在与 chart.html 同一个目录下。
清单 2. JSON 数据样本

{

  "title":{

    "text":  "Many data lines",

    "style": "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}"

  },

  "y_legend":{

    "text": "Open Flash Chart",

    "style": "{color: #736AFF; font-size: 12px;}"

  },

  "elements":[

    {

      "type":      "bar",

      "alpha":     0.5,

      "colour":    "#9933CC",

      "text":      "Page views",

      "font-size": 10,

      "values" :   [9,6,7,9,5,7,6,9,7]

    },

    {

      "type":      "bar",

      "alpha":     0.5,

      "colour":    "#CC9933",

      "text":      "Page views 2",

      "font-size": 10,

      "values" :   [6,7,9,5,7,6,9,7,3]

    }

  ],

  "x_axis":{

    "stroke":1,

    "tick_height":10,

    "colour":"#d000d0",

    "grid_colour":"#00ff00",

    "labels": ["January","February","March","April","May",

                "June","July","August","Spetember"]

   },

  "y_axis":{

    "stroke":      4,

    "tick_length": 3,

    "colour":      "#d000d0",

    "grid_colour": "#00ff00",

    "offset":      0,

    "max":         20

  }

}

OFC图表展示

在浏览器地址栏输入URL，比如：http://localhost:8080/chart/chart.html?ofc=data.json, 就可以看到的图表效果。
图 2. Web 图表效果

回页首

在 Eclipse RCP 中使用 Open Flash Chart

目前，有许多应用的 GUI 是基于 Eclipse RCP 或者 SWT 开发的。但是 OFC 这样强大的图形报表工具还没有出现在 Eclipse RCP 应用中。在这些应用中也需要绘制图形报表，需要 Open Flash Chart 这样的工具来实现很好的图形效果。

Open Flash Chart 2 在 Eclipse RCP 中的使用很简单。在 SWT 组件中，通过 Flash 播放器来播放 open-flash-chart.swf，然后再加载图表的 JSON 格式数据即可。

在 RCP 中播放 Open Flash Chart

要使用 Open Flash Chart，我们需要播放 open-flash-chart.swf 这个文件。在 Window 平台，我们使用包 org.eclipse.swt.ole.win32 提供的 Ole 组件来实现 Flash 的播放。

  1. 注册 Flash 组件

首先创建一个 OleFrame 对象来作为容纳 Ole 对象的容器，然后再创建一个 Flash 类型的 Ole对象。"ShockwaveFlash.ShockwaveFlash" 为 Macromedia Flash 的 ShockwaveFlash 控件在 Windows 平台上的唯一标识符，程序将自动使用当前控件的最新版本。打开 Windows 注册表,在注册表中可以找到 HKEY_CLASSES_ROOT\ShockwaveFlash.ShockwaveFlash 相关项及对应版本。
清单 3. 注册Flash组件

OleFrame oleFrame = new OleFrame(shell, SWT.NONE);

oleFrame.setLayoutData(new GridData(GridData.FILL_BOTH));

OleControlSite controlSite =

    new OleControlSite(oleFrame, SWT.NONE, "ShockwaveFlash.ShockwaveFlash");

controlSite.doVerb(OLE.OLEIVERB_SHOW);	//定义为显示控件
  1. 通过 OleAutomation 来调用注册组件

对 Active X 控件的操作通过 OleAutomation 对象来实现，并通过 automation.getIDsOfNames()来得到控件方法对应的 id 值。借助 OleView.exe 工具，可以查看 ActiveX 控件的方法。
清单 4. 调用注册的 Flash 组件

final OleAutomation automation = new OleAutomation(controlSite);

int[] methodIDs = automation.getIDsOfNames(new String[] { "LoadMovie" });
  1. 加载 JSON 文件

通过 automation.invoke(int, Variant[]) 来调用 Active X 控件的方法。其中的 int 参数表示要调用的 Active X 控件的方法的 ID，Variant[] 参数就是要传递给 Active X 控件的方法的参数。
清单 5. 加载 JSON 文件，调用控件

Variant[] methodArgs = {

    new Variant(0), new Variant(file+"?data-file=jsonfile.txt ") };

automation.invoke(methodIDs[0], methodArgs);

在清单5中，String file 是 open-flash-chart.swf 的绝对路径，jsonfile.txt 是需要加载的 JSON 数据的文件路径。

图表数据文件的生成

要通过 Open Flash Chart 来绘制图表，需要生成图表对应的 JSON 数据文件。我们使用 Json Tools 来对 JSON 进行处理。

  1. 使用 JSON Tools

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，基于 ECMAScript 标准中对ObjectLiteral 的定义 (ECMA-262, 11.1.5)，通过一组键值对来定义一个对象。可以用 JSON 来描述一个图表，然后通过 Open Flash Chart 加载 JSON 数据持久化后的文本文本，就能展示这个图表。

JSON Tools 采用 Java 面向对象的方法对 JSON 的处理进行了封装。使用 JSON Tools 封装的API，可以很方便的对 JSON 格式的文本进行操作，进行 JSON 文本到 java 对象之间的相互转换。利用 JSON Tools，即使对 JSON 不是很了解的开发人员，也能很容易的构造出想要的 JSON 格式文本。在 http://developer.berlios.de/projects/jsontools/ 可以下载到 JSON Tools.

  1. Chart 模型的设计

我们根据 Chart 需要支持的相关属性来设计 Chart 的模型。依赖于 JSON Tools，采用策略模式进行 Chart 模型和 JSON 对象间的转换。下面是简单的设计类图。
图 3. Chart 模型设计类图 

各种不同类型的 Chart 需要继承和扩展 Element 来实现。通过 Chart 模型，使用面向对象的编程方法，只需调用 ChartData 里的 buildJSON 方法就可以构建展示 Flash 图表所需要的 JSON 格式的文本文件。

buildJSON 方法是从 Chart 模型到 JSON 对象转换的桥梁，这个方法中，根据 Chart 的属性和 JSON 文本的映射关系进行转换。这里给出 AbstractAxis 中的 buildJSON 方法：
清单 6. buildJSON 方法

public JSONValue buildJSON()

 {

    JSONObject json = new JSONObject();

        if (stroke != null)

            json.getValue().put(

                "stroke",

                new JSONInteger(BigInteger.valueOf(stroke)));

        if (colour != null)

            json.getValue().put("colour", new JSONString(colour));

    	if (gridColour != null)

            json.getValue().put("grid-colour", new JSONString(gridColour));

    	if (steps != null)

            json.getValue().put("steps", new JSONInteger(BigInteger.valueOf(steps)));

    	if (offset != null)

            json.getValue().put("offset", new JSONInteger(BigInteger.valueOf(offset)));

    	if (zdepth3d != null)

            json.getValue().put("3d", new JSONInteger(BigInteger.valueOf(zdepth3d)));

    	if (min != null)

            json.getValue().put("min", new JSONInteger(BigInteger.valueOf(min)));

    	if (max != null)

            json.getValue().put("max", new JSONInteger(BigInteger.valueOf(max)));

    	return json;

 }

回页首

JFreeChart，BIRT Chart 和 Open Flash Chart 比较

JFreeChart，BIRT Chart 和 Open Flash Chart 是3种应用较多的图表绘制工具。这三种工具各有自身的优势。为了更好的对这3中图表绘制工具进行比较，我们基于 RCP 实现了这3种绘制工具对比的示例，下图给出了 Bar Chart 和 Area Chart 两种类型 chart 的对比。
图 4. 三种 Charts 对比示例

JFreeChart 是一种基于 JAVA 语言的图表开发技术。 JFreeChart 可用于 Servlet，JSP，applet，Java Appication 环境中。 JFeeChart 中有 DataSet 这个数据集对象，提供了很强的数据处理的功能，并且还能对已经生成的图形进行调整和配置操作。

BIRT Chart 是基于 Eclipse 的开源报表工具。BIRT 可以产生 PNG, JPG, BMP, SVG 格式的图形，使得图形的使用范围很广泛。另外，BIRT 有很强的数据访问的功能，提供了 JDBC, XML, Web Services 和 Flat File 数据源处理的支持。

Open Flash Chart 是 Flash 图形报表工具。它最大的特点就是使用简单，图形美观，拥有很好的动态效果。对于 OFC2，它只需加载一个图形对应的 JSON 格式文本，就能在 Flash 中展示图形报表，可以通过修改 JSON 文本来改变图形的数据和展现效果。
表 1. 三种 charts 比较

Name License Latest Version OSSC Review Level 1 in IBM
JFreeChart LGPL 1.0.11 No
BIRT Chart Eclipse Public License 1.0 2.3.1 Yes
Open Flash Chart LGPL 2 No

参考资料

Open Flash Chart 简介的更多相关文章

  1. Open Flash Chart在php中的使用教程

    http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 为了画一个漂亮的表格,我从网上找到了OpenFlashChart(of ...

  2. Python Open Flash Chart (pyOFC2) — Home

    Python Open Flash Chart (pyOFC2) - Home pyOFC2 Python Open Flash Chart 2

  3. 使用Open Flash Chart(OFC)制作图表(Struts2处理)

    Java开源项目中制作图表比较出色的就是JFreeChart了,相信大家都听说过,它不仅可以做出非常漂亮的柱状图,饼状图,折线图基本图形之外,还能制作甘特图,仪表盘等图表.在Web应用中可以为项目增色 ...

  4. Open Flash Chart 之线图(二)

    上一节在研究Open Flash Chart时,漏掉不少东西,只是简单的熟悉了一下后端的属性设置.今天再来补充一下. 一.显示Open Flash Chart图表 Open Flash Chart 前 ...

  5. PHP-Open Flash Chart报表生成

    下载: http://www.cnblogs.com/huangcong/archive/2013/01/27/2878650.html 安装: 解压ZIP包, 将open-flash-chart.s ...

  6. Open Flash Chart IO ERROR Loading test data Error #2032

    http://blog.sina.com.cn/s/blog_6754464e0100qfvd.html Open Flash Chart 2 提示Open Flash Chart IO ERROR ...

  7. Open Flash Chart图表的JSON格式基本属性详解

    http://blog.csdn.net/wangwenhui11/article/details/4283571 数据文件必须是JSON格式.JSON对象的基本格式: {} 把所有对象都编写在{}里 ...

  8. c# 与flash通信简介

    许久不曾写随笔,即使许久的怠惰,是该抬抬头,看看天了. 公司项目,项目要求是在winForm端先获取下位机的肌电信号采集数据,然后根据这些数据的变化来控制flash游戏,这样一些患者在flash游戏中 ...

  9. NAND Flash内部结构简介

    介绍     1965年,在双极管被W.Shockley.W.Brattain和J.Bardeen三人发明出来之后,Intel的合作创始人Gordon Moore发现了这样一条法则:当价格不变时,集成 ...

随机推荐

  1. log4net 简易封装

    using log4net; using log4net.Appender; using log4net.Config; using log4net.Core; using log4net.Layou ...

  2. 观察者模式(observer)c++实现

    1意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新. 2别名 依赖(Dependents), 发布-订阅(Publish-Subscribe ...

  3. 诊断Java中的内存泄露

    每次我怀疑有内存泄漏时,我都要翻箱倒柜找这些命令.所以,这里总结一下以备后用: 首先,我用下面的命令监视进程: 1 while ( sleep 1 ) ; do ps -p $PID -o %cpu, ...

  4. catkin_package()是什么意思？

    DEPENDS 和 CATKIN_DEPENDS 用来告诉 catkin 需要将你程序包A的哪些依赖项传递给使用 find_package(...) 查找你的程序包的程序包B. 而在CMakeList ...

  5. 梦想CAD控件网页版线型

    增加线型 主要用到函数说明: _DMxDrawX::AddLinetype 增加一个线型定义.详细说明如下: 参数 说明 BSTR pszName 线型名 BSTR pszLineDefine 线定义 ...

  6. adb 命令收藏学习地址

    adb 命令相关的网页https://www.cnblogs.com/medsonk/p/8334847.htmlhttps://www.cnblogs.com/medsonk/p/6959658.h ...

  7. 面向对象程序设计--Java语言第二周编程题：有秒计时的数字时钟

    有秒计时的数字时钟 题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做 ...

  8. C++ 11常见功能介绍:auto,decltype,nullptr,for,lambda

    什么是C++11 C++11是曾经被叫做C++0x,是对目前C++语言的扩展和修正,C++11不仅包含核心语言的新机能,而且扩展了C++的标准程序库(STL),并入了大部分的C++ Technical ...

  9. 洛谷——P3018 [USACO11MAR]树装饰Tree Decoration

    P3018 [USACO11MAR]树装饰Tree Decoration 比较水的一道树上模拟水题,更新每个点的价值为以这个点为根的子树中的价值最小值,同时更新以每个节点为根的$sum$值,即以这个节 ...

  10. 深入分析同步工具类之CountDownLatch

    概览: CountDownLatch又称闭锁,其作用是让一个或者多个线程挂起,直到其他的线程执行完后恢复挂起的线程,使其继续执行.内部维护着一个静态内部类Sync,该类继承AbstractQueued ...