open flash chart

最新推荐文章于 2025-11-24 19:03:43 发布

原创最新推荐文章于 2025-11-24 19:03:43 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flash #json #web

J2EE 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了 OpenFlashChart2 的安装及使用方法，包括下载、部署步骤，如何通过 JSON 格式传递数据，并展示了简化页面内容及数据生成的多种方式。

无意中看到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:

Your browser requests js.php
js.php is run on the server
js.php creates a PHP open_flash_chart() object
open_flash_chart writes the chart JSON data into the <script type="text/javascript"> section of the page
The browser downloads the page
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的产生也是有工具类库可以快速搞定的。图形的展示效果还是蛮不错的。