Open Flash Chart 使用方法（一）

最新推荐文章于 2012-11-13 13:16:00 发布

vboy1010

最新推荐文章于 2012-11-13 13:16:00 发布

阅读量2.9k

点赞数

分类专栏：开源软件文章标签： flash microsoft object function url javascript

本文链接：https://blog.csdn.net/vboy1010/article/details/7634142

版权

开源软件专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用OFC前，必须引入文件：open-flash-chart.swf。

OFC获取的数据格式：JSON。

OFC多种获取数据的方式：

一、通过URL获取：在URL中设置ofc参数，参数值为与文件chart.html同目录下的数据文件名data.json。

chart.html：chart.html?ofc=data.json

HTML嵌入代码：

1、嵌入object。

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

2、引入JS文件：swfobject.js。

原因： In IE, whenyou mouse over the chart, you will see a message "Click to activate thiscontrol".
Due to various stupid legal things, IE can not 'start' the chartwithout the user clicking on it.
But don't worry, we can use a little bit ofJavascript to do this for us.

注意：任何传递给swfobject的参数，必须Url_encode，为了防止非法字符：? 和 &。

引入JS：

<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>
<div id="my_chart"></div>

二、通过设置参数：data-file：OFC会自动查找传入的文件名，找到文件并自动加载。

HTML嵌入代码：

<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":"data.php"});
</script>
<div id="my_chart"></div>

注意：

1、通过URL传入的参数ofc=***优先级高于参数data-file。

2、图表会画在ID 为 my_chart 的DIV中。

DEMO：

1、http://teethgrinder.co.uk/open-flash-chart-2/tutorial/chart.html?ofc=data.json ofc 参数

2、http://teethgrinder.co.uk/open-flash-chart-2/tutorial/chart-2.html?ofc=data.json ofc 参数

3、http://teethgrinder.co.uk/open-flash-chart-2/tutorial/chart-6.html data-file

三、使用PHP将JSON数据写入JS变量中，绘图。

<?php

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

$title = new title( date("Y-m-d") );

$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 );

?>

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

备注：

1、Inside open_flash_chart_data() we take the JSON object, make it into a string and pass this string to the chart.

2、The last thing Open Flash Chart does after it has loaded data is call the Javascript function ofc_ready(), this is where you would start your AJAX timer.

vboy1010

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Open Flash Chart 使用方法（一）

使用OFC前，必须引入文件：open-flash-chart.swf。OFC获取的数据格式：JSON。OFC多种获取数据的方式：一、通过URL获取：在URL中设置ofc参数，参数值为与文件chart.html同目录下的数据文件名data.json。 chart.html：chart.html?ofc=data.json HTML嵌入代码：
复制链接

扫一扫