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