Open Flash Chart 使用方法（一）

发布时间：2020-12-15 18:44:30 所属栏目：百科来源：网络整理

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

使用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"
        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","550","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","350","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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!