加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 17:52:35 所属栏目:百科 来源:网络整理
导读:Open Flash Chart 2.0 是一个用来生成Flash的图表的组件,开源、免费、功能强大、图表漂亮且可以显示提示信息,是本人目前认为最好的一款flash图表绘制组件。其图表数据格式为JSON。 本篇文章主要目的是记述本人在使用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的浏览所有实例的页面。如果是其它语言,你可以修改以下关于读取目录文件的代码片段。

[php] view plain copy
  1. <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">??
  2. <html?xmlns="http://www.w3.org/1999/xhtml">??
  3. <head>??
  4. <meta?http-equiv="Content-Type"?content="text/html;charset=UTF-8"?/>??
  5. <script?language="JavaScript"?type="text/JavaScript"?src="js/jQuery.js"></script>??
  6. <script?language="JavaScript"?type="text/JavaScript"?src="js/swfobject.js"></script>??
  7. <script>??
  8. $(document).ready(function(){??
  9. ??$(".view").click(function(){??
  10. ????var?url='data-files/'+$("#file").val();??
  11. ????swfobject.embedSWF("open-flash-chart.swf","my_chart","100%","350","9.0.0","expressInstall.swf",{"data-file":url});??
  12. ??});??
  13. ??$(".open").click(function(){??
  14. ????var?url='data-files/'+$("#file").val();??
  15. ????location.href=url;??
  16. ??});??
  17. ??var?url='data-files/'+$("#file").val();??
  18. ??swfobject.embedSWF("open-flash-chart.swf",{"data-file":url});??
  19. });??
  20. </script>??
  21. </head>??
  22. <body>??
  23. <table?width="1030"?border="0"?cellpadding="0"?cellspacing="0">??
  24. <tr><td?height="50">??
  25. <select?id="file">??
  26. <?php??
  27. $real_dir='data-files';??
  28. if($dir?=?@opendir($real_dir))?{??
  29. ??while?(($file_name?=?readdir($dir))?!==?false){??
  30. ????$path_parts?=?pathinfo($file_name);??
  31. ????if($path_parts['extension']=='txt')??
  32. ??????echo?'<option?value="'.$path_parts['basename'].'">'.$path_parts['basename'].'</option>';??
  33. ??}??
  34. ??closedir($dir);??
  35. }else{??
  36. ??echo?"打开文件夹失败:$real_dir";??
  37. ??exit;??
  38. }??
  39. ?>??
  40. </select>??
  41. <button?class="view">显示图表</button>??
  42. <button?class="open">打开文件</button>??
  43. </td></tr>??
  44. <tr>??
  45. <td?colspan=3><div?id="my_chart"></div></td>??
  46. </tr>??
  47. </table>??
  48. </body>??
  49. </html>??

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

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

[php] view plain copy
  1. header("Content-Type:text/html;charset=utf-8");??

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

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

[php] view plain copy
  1. ......??
  2. "elements":[??
  3. ?{??
  4. ??"type":"line",??
  5. ??"values":[<?php?echo?implode(',',$regUserCountArr);?>],??
  6. ??"colour":"#ffae00",??
  7. ??"text":"注册用户",??
  8. ??"font-size":12,??
  9. ??"tip":"没有效果,只有放到values中。注册用户:#val#?人"??
  10. ?},??
  11. ......??

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

下面看一下values格式:

[plain] view plain copy
  1. "values"?:???[9,6,7,5,{"top":7,"colour":"#FF0000",?"tip":?"RED<br>Mooo<br>#val#"},9,7]??

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

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

我的一个示例演示

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

[php] view plain copy
  1. for($v=1;?$v<=当月的最大天数;$v++){??
  2. ??$sql='...';??
  3. ??$r=mysql_query($sql);??
  4. ??$a[value]=当月每一天的注册用户数;??
  5. ??$a[tip]="注册用户:#val#?人";??
  6. ??$regUserCountArr[]=json_encode($a);??
  7. }??
[plain] view plain copy
  1. "elements":[??
  2. ?{??
  3. ??"type":"line",??
  4. ??"values":[<?php?echo?implode(',',$regUserCountArr);?>],??
  5. ??"colour":"#ffae00",??
  6. ??"text":"注册用户",??
  7. ??"font-size":12,??
  8. ??"tip":"没有效果,放到values中。"??
  9. ?},??

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

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

[php] view plain copy
  1. 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
  1. var?url='obj_data.php?a=1&b=2';??
  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上的右键操作,具体方法请关注本博客内容。

(编辑:李大同)

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

    推荐文章
      热点阅读