Open Flash Chart 2.0 使用及问题的解决

最新推荐文章于 2014-08-13 21:27:08 发布

小菜鸟的博客

最新推荐文章于 2014-08-13 21:27:08 发布

阅读量3.4k

点赞数

分类专栏： flash

flash 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Open Flash Chart 2.0 是一个用来生成Flash的图表的组件，开源、免费、功能强大、图表漂亮且可以显示提示信息，是本人目前认为最好的一款flash图表绘制组件。其图表数据格式为JSON。

本篇文章主要目的是记述本人在使用Open Flash Chart 2.0 过程中所遇见的问题及解决办法总汇。

一、原解压包中的实例不能演示Flash图表

解压open-flash-chart-2-Lug-Wyrm-Charmer.zip文件，data-files目录下的几个例子几乎都不能用。如果你也遇到了这种情况，那么按我下面的方法，来看一下Open Flash Chart 2.0自带例子中丰富漂亮的flash图表吧。

1、下面实例只能以WEB方式查看，不能以本地形式。
2、将open-flash-chart-2-Lug-Wyrm-Charmer.zip解压中的data-files目录、js目录、open-flash-chart.swf文件复制到WEB根目录，同时将jquery.js放到js目录中。
3、将以下代码保存为index.php文件，即可通过WEB方式浏览所有实例的flash图表效果。
注意：本篇内容结尾提供open-flash-char-2下载，压缩包内有支持ASP和PHP的浏览所有实例的页面。如果是其它语言，你可以修改以下关于读取目录文件的代码片段。

[php] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="js/jQuery.js"></script>
<script language="JavaScript" type="text/JavaScript" src="js/swfobject.js"></script>
<script>
$(document).ready(function(){
$(".view").click(function(){
var url='data-files/'+$("#file").val();
swfobject.embedSWF("open-flash-chart.swf","my_chart","100%","350","9.0.0","expressInstall.swf",{"data-file":url});
});
$(".open").click(function(){
var url='data-files/'+$("#file").val();
location.href=url;
});
var url='data-files/'+$("#file").val();
swfobject.embedSWF("open-flash-chart.swf","my_chart","100%","350","9.0.0","expressInstall.swf",{"data-file":url});
});
</script>
</head>
<body>
<table width="1030" border="0" cellpadding="0" cellspacing="0">
<tr><td height="50">
<select id="file">
<?php
$real_dir='data-files';
if($dir = @opendir($real_dir)) {
while (($file_name = readdir($dir)) !== false){
$path_parts = pathinfo($file_name);
if($path_parts['extension']=='txt')
echo '<option value="'.$path_parts['basename'].'">'.$path_parts['basename'].'</option>';
}
closedir($dir);
}else{
echo "打开文件夹失败:$real_dir";
exit;
}
?>
</select>
<button class="view">显示图表</button>
<button class="open">打开文件</button>
</td></tr>
<tr>
<td colspan=3><div id="my_chart"></div></td>
</tr>
</table>
</body>
</html>

二、Flash图表中中文显示乱码

正式使用的情况下，图表中的显示内容都是根据实际项目生成的json格式数据，如果我们用中文来显示一些内容，如果你不用utf-8编码的话，那么中文显示的就是一堆乱码。所以，在处理图表显示数据的独立页面（一般这个页面生成的结果是json格式的数据流，类似Open Flash Chart 2.0自带例子中data-files目录下的txt文本内容），这里以PHP为例，要在输出JSON数据之前加上：

[php] view plain copy

header("Content-Type:text/html;charset=utf-8");

三、有的示例图表的节点不显示tip内容

Open Flash Char 2.0自带的有的例子中，生成的Flash图表，鼠标移到节点上不显示tip信息，排除了缓存现象后，可能是其本身问题。

[php] view plain copy

......
"elements":[
{
"type":"line",
"values":[<?php echo implode(',',$regUserCountArr);?>],
"colour":"#ffae00",
"text":"注册用户",
"font-size":12,
"tip":"没有效果，只有放到values中。注册用户：#val# 人"
},
......

正如上面的代码中tip属性，即显示不同节点的注册用户人数。然而部分图表却不显示。尝试将提示信息集成到values属性中，问题得到完美解决。

下面看一下values格式：

[plain] view plain copy

"values" : [9,6,7,0,5,{"top":7,"colour":"#FF0000", "tip": "RED<br>Mooo<br>#val#"},6,9,7]

#val#代表的当前节点的值。还有其它类似这样的表达式，可以自己测试结果。

上面的values属性中格式看一眼就明白。如果对所有的节点显示tip，则原来默认的每个值换成一组以花括号包含的序列，{"属性名称":值,"属性名称":值...}。

我的一个示例演示

假设显示当月每一天的注册用户数量

[php] view plain copy

for($v=1; $v<=当月的最大天数;$v++){
$sql='...';
$r=mysql_query($sql);
$a[value]=当月每一天的注册用户数;
$a[tip]="注册用户：#val# 人";
$regUserCountArr[]=json_encode($a);
}

[plain] view plain copy

"elements":[
{
"type":"line",
"values":[<?php echo implode(',',$regUserCountArr);?>],
"colour":"#ffae00",
"text":"注册用户",
"font-size":12,
"tip":"没有效果，放到values中。"
},

四、IE6出现：Open Flash Chart IO ERROR Loading test data Error #2032 错误

IE8、firefox、chrome、傲游浏览器等测试都正常，但在IE6中出现以上错误，无法显示Flash图表。解决办法是在输出JSON数据之前加了一行代码（PHP）

[php] view plain copy

header("Cache-Control: must-revalidate, post-check=0, pre-check=0");

Cache-Control的must-revalidate：强制页面不缓存，作用与no-cache相同，但更严格，强制意味更明显。详细作用请参考：http://hi.baidu.com/chenleibupt/blog/item/9627bec6932e5a179c163df2.html
post-check和pre-check：Internet Explorer 5对于HTTP头信息使用两种新的时间间隔指示：pre-check 和post-check。pre-check扩展名定义了这样一段时间间隔（以秒记）：即在这段时间间隔之后，一个对象在显示给用户之前应被选中进行更新。选中对象也可以发生在该对象已经显示给用户之后，但是，要保证在用户下次想要看这个对象时，被高速缓存起来的副本是更新过的。post-check扩展名定义了这样一段时间间隔（以秒记）：即在这段时间之后，在显示给用户之前，该对象被选中进行更新。即post-check=0,pre-check=0是IE5.0才有的防cache声明。
参考来自：
1、http://bbs.chinaunix.net/thread-704320-1-1.html
2、http://blog.sina.com.cn/s/blog_5595d51401000b23.html

关于Pragma:no-cache，跟Cache-Control: no-cache相同。Pragma: no-cache兼容http 1.0 ，Cache-Control: no-cache是http 1.1提供的。因此，Pragma: no-cache可以应用到http 1.0 和http 1.1，而Cache-Control: no-cache只能应用于http 1.1.

五、参数传递不能超过1个

[javascript] view plain copy

var url='obj_data.php?a=1&b=2';
swfobject.embedSWF("open-flash-chart.swf","my_chart","100%","350","9.0.0","expressInstall.swf",{"data-file":url});

上面obj_data.php中只能接收参数a值，接收不了参数b的值；如果将参数a与b互换，则只能接收b的值，不能接收a的值了。简而言之，只能接收第一个参数，且只能接收一个参数。所以如果有多个参数的话，在URL参数中把不同的参数值用一符号分隔，然后在接收程序中对该字符串进行分割提取。

六、其它内容

官方示例：http://teethgrinder.co.uk/open-flash-chart/gallery-inner-bg.php

组件下载：http://download.csdn.net/detail/zm2714/4520118

该压缩包中包含ASP和PHP环境下自动提取所有示例并显示flash图表，方便用户根据自己项目选择合适的flash图表。同时修改swfobject.js文件，以支持透明flash，可通过技术手段屏蔽flash上的右键操作，具体方法请关注本博客内容。

小菜鸟的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Open Flash Chart 2.0 使用及问题的解决

Open Flash Chart 2.0 是一个用来生成Flash的图表的组件，开源、免费、功能强大、图表漂亮且可以显示提示信息，是本人目前认为最好的一款flash图表绘制组件。其图表数据格式为JSON。本篇文章主要目的是记述本人在使用Open Flash Chart 2.0 过程中所遇见的问题及解决办法总汇。一、原解压包中的实例不能演示Flash图表解压open-flash-char
复制链接

扫一扫