Flash图表组件——使用Open Flash Chart 2.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的浏览所有实例的页面。如果是其它语言,你可以修改以下关于读取目录文件的代码片段。

<!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数据之前加上:

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

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

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

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

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

下面看一下values格式:

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

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

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

我的一个示例演示

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

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

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个

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上的右键操作,具体方法请关注本博客内容。

你可能感兴趣的:(JavaScript,json,function,Flash,url,Path)