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",{"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,5,{"top":7,"colour":"#FF0000",?"tip":?"RED<br>Mooo<br>#val#"},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个
[javascript]
view plain
copy
- var?url='obj_data.php?a=1&b=2';??
- swfobject.embedSWF("open-flash-chart.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上的右键操作,具体方法请关注本博客内容。