`
jianchen
  • 浏览: 343561 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

open flash chart

    博客分类:
  • J2EE
阅读更多

无意中看到business preview这个应用的图标是用open flash chart做的,遂上网了解了下该开源图表工具。平时自己想搞个快速的数据报表出来还是蛮方便的。

 

http://teethgrinder.co.uk/open-flash-chart-2/

 

open flash chart现在是2的大版本号,之前1的版本的数据文件格式不太通用,2的版本之后支持json的数据格式,可以将显示的报表的数据(包含格式),以json的格式进行解析。

 

 

1,download 相应的zip包。

 

2,将压缩包解压缩后放到web server的对应的目录下。

 

3,简单的理解就是,解析数据的open-flash-chart.swf程序,然后数据可以是一个存在服务器上的文本文件

比如:localhost:8080/flashChart/indexChart.htm?ofc=data.json

data.json就是一个数据文件,里面的数据以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": {
        "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
  }
}

 

indexChart.htm的内容为:

<html>
<head>
</head>
<body>
 
<p>Hello World</p>
 
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="250" id="graph-2" align="middle">
 <param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="open-flash-chart.swf" />
	<param name="quality" value="high" />
	<embed src="open-flash-chart.swf"
		   quality="high"
		   bgcolor="#FFFFFF"
		   width="500"
		   height="250"
		   name="open-flash-chart"
		   align="middle"
		   allowScriptAccess="sameDomain"
		   type="application/x-shockwave-flash"
		   pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

 

也可以是程序(PHP,java等)及时产生的。这样请求的对象就是相应的page。

比如:localhost:8080/flashChart/indexChart.htm?ofc=data.jsp

data.jsp页面输出相关的数据字符串。

 

4,indexChart.htm页面的内容可以精简下,有人写了一些js做了精简工作,swfobject.js文件已经包含在下载的压缩包里了。所以indexChart.htm的内容可以精简为:

<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>

 

发送的请求连接依然不变。

 

5,上面获取图形展示所需要的数据都是通过URL的方式,传了一个ofc的参数,这个还可以再精简。

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
  "open-flash-chart.swf", "my_chart", "550", "200",
  "9.0.0", "expressInstall.swf",
  {"data-file":"chart-3.php"}
  );
</script>
 

 

对indexChart的一段js脚本做些改变,传入了data-file的文件,这里德chart-3.php就是产生数据的程序页面。

这样就可以去掉URL中的ofc参数.如果有多个数据文件,用URL的方式也是无法满足的。所以该方案用的比较多。

 

6,data-file的数据其实未必需要在另外一个页面来处理产生,就是在当前页就可以处理,然后传个那个函数即可。

 

The sequence of steps goes like this:

  1. Your browser requests js.php
  2. js.php is run on the server
  3. js.php creates a PHP open_flash_chart() object
  4. open_flash_chart writes the chart JSON data into the <script type="text/javascript"> section of the page
  5. The browser downloads the page
  6. The browser runs the Javascript (which creates the JSON object)

 看到以下内容应该很容易就理解了。

<?php
//
// This is the MODEL section:
//

include '../php-ofc-library/open-flash-chart.php';

$title = new title( date("D M d Y") );

$bar = new bar();
$bar->set_values( array(9,8,7,6,5,4,3,2,1) );

$chart = new open_flash_chart();
$chart->set_title( $title );
$chart->add_element( $bar );

//
// This is the VIEW section:
//

?>
<html>
<head>
<script type="text/javascript" src="../js/json/json2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("open-flash-chart.swf", "my_chart", "350", "200", "9.0.0");
</script>

<script type="text/javascript">

function ofc_ready()
{
    alert('ofc_ready');
}

function open_flash_chart_data()
{
    alert( 'reading data' );
    return JSON.stringify(data);
}

function findSWF(movieName) {
  if (navigator.appName.indexOf("Microsoft")!= -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}   
var data = <?php echo $chart->toPrettyString(); ?>;
</script>
</head>
<body>
<p>Hello World</p>
<div id="my_chart"></div>    
</body>
</html> 

 

 7,具体数据的格式到底如何定义,以及调整样式的配置等,参考文档即可。当然了,json的产生也是有工具类库可以快速搞定的。图形的展示效果还是蛮不错的。

分享到:
评论

相关推荐

    Open Flash Chart 教程

    Open Flash Chart 是一款开源的Flash图表库,它允许开发者通过简单的JavaScript API生成各种美观的、交互式的图表。这个教程可能是为了帮助用户理解如何利用Open Flash Chart来创建动态和定制化的图表,适合Web...

    open flash chart api

    Open Flash Chart API 是一款强大的开源图表库,它使用Flash技术来生成高质量、交互式的图表。在Web开发中,数据可视化是至关重要的,Open Flash Chart API 提供了丰富的功能,使得开发者能够轻松创建各种类型的图表...

    Open Flash Chart所需文件

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建高质量、互动的图表。它提供了丰富的自定义选项,能够生成各种类型的图表,包括柱状图、饼图、线点图等,使得数据可视化变得更加简单易行。在...

    open flash chart库

    **Open Flash Chart库详解** Open Flash Chart是一款强大的开源图表库,专为PHP开发者设计,用于创建各种美观且交互性强的数据可视化图表。它以其出色的视觉效果和丰富的自定义选项,在Web应用中广泛使用,尤其适用...

    Open Flash Chart例子、中文版PDF说明文档、参数表

    Open Flash Chart(简称OFC),是一个开源的flash报表组件。我们不仅可以免费使用,而且还可以修改源码,来达到我们想要的效果。客户端在得到数据以后,在Flash Player中渲染出报表图。  附带PDF说明文档,是中文版...

    Open Flash Chart的应用(java),就是很炫的报表了

    这里面有两个java代码工程和 Open Flash Chart API。工程都是调试过的直接导入可用,代码都有详细的注释,如果你真是想用到报表之类的东西,肯定很不错了。 工程所需的jar 包 js文件都有,基本上很全。 第一步:...

    完整的open flash chart 。

    Open Flash Chart是一款强大的开源图表库,它使用Flash技术来创建美观、交互式的图表。这款工具在Web开发中尤其受欢迎,因为它允许开发者轻松地为网站添加数据可视化功能,而无需深入学习复杂的图形编程。以下是关于...

    flash图表组件Open Flash Chart 2.0+(asp/php)自动提取示例+使用说明

    文件由官方提供的open-flash-chart-2-Lug-Wyrm-Charmer.zip原版文件,仅修改支持透明的flash的swfobject.js,原文件也在压缩包内。 增加方便调用示例文件的index.php和index.asp,其它文件未做任何改动。 php环境请...

    开源flash图表--open flash chart

    **开源Flash图表——Open Flash Chart** Open Flash Chart是一款开源的Flash图表库,它允许开发者通过简单的JavaScript接口创建出丰富的、动态的、具有交互性的图表。这个库特别适用于那些需要在网页上展示数据可视...

    Open Flash Chart的使用说明及参数的设定

    Open Flash Chart,制作图表,柱状图,饼图,线点图,Open Flash Chart的使用说明及参数的设定。

    open-flash-chart-1[1].9.7.zip_flash chart tr_open flash chart

    《Open Flash Chart:一款强大的Flash图表库》 Open Flash Chart是一款功能强大的开源Flash图表库,其在IT领域中被广泛用于生成美观且交互性强的数据可视化图表。与JFreeChart等Java图表库相比,Open Flash Chart...

    open flash chart 实例1

    **Open Flash Chart 知识点详解** Open Flash Chart 是一个开源的Flash图表库,它允许开发者轻松地在网页上创建动态、美观的数据可视化图表。这个实例1是关于如何使用Open Flash Chart进行实际操作并获得成功的一个...

    Open Flash Chart2 相关资料

    由于最近公司项目中要用到图表,看到Open Flash Chart这个还不错,开源的,而且官方还附带了很多Demo,最重要的是支持很多的语言,只是这个东西一直很久没有更新,在网上找了很多资料,找到了Open Flash Chart社区...

    open flash chart2实例

    Open Flash Chart 2是一款强大的开源图表库,它允许开发者创建各种动态、美观的图表,包括饼图、曲线图和柱状图等。这个实例集合提供了一系列的示例代码,帮助我们理解和应用Open Flash Chart 2的功能。下面我们将...

    Open Flash Chart 报表插件相关

    Open Flash Chart是一款强大的开源图表生成插件,常用于创建交互式、美观的图表,尤其适合在Web应用程序中显示数据。这个插件支持多种编程语言,包括ASP.NET,使得开发者能够轻松地将动态数据转化为视觉上吸引人的...

    open flash chart 制图Demo及文档

    《Open Flash Chart 制图Demo及文档解析》 在当今数据可视化领域,Open Flash Chart是一款广泛应用的开源图表库,它以其强大的功能和丰富的定制性深受开发者喜爱。本篇将深入探讨"Open Flash Chart 制图Demo及文档...

    最新版Open Flash Chart

    Open Flash Chart是一款强大的开源Flash图表组件,用于创建各种复杂且美观的数据可视化效果。这款软件的最新版本2.0带来了更多的功能和改进,旨在为开发者提供更便捷、灵活的方式来展示数据。下面将详细介绍Open ...

    open flash chart 1.9 文档及源码

    《Open Flash Chart 1.9:打造动态图表的利器》 Open Flash Chart 是一款开源的Flash图表库,专为创建高质量、交互式的图表而设计。本文将深入探讨Open Flash Chart 1.9版本,包括其核心特性、使用方法以及如何通过...

    Open Flash Chart java例子 eclipse 测试通过

    Open Flash Chart是一款强大的开源Flash图表库,用于在Web应用程序中创建动态、交互式的图表。它使用ActionScript编写,可以通过服务器端的数据与JavaScript进行通信,从而生成高质量的图表。本示例是关于如何在Java...

    open flash chart 实例2

    《Open Flash Chart实例详解》 在网页数据可视化领域,Open Flash Chart是一款强大的开源图表库,它使用Flash技术绘制出各种美观且交互性强的图表。本文将深入探讨Open Flash Chart的实际应用,结合提供的"chart-2....

Global site tag (gtag.js) - Google Analytics