开发者社区> 技术mix呢> 正文

open-flash-chart + PHP + jQuery实例

简介:
+关注继续查看

这个文章说一下open-flash-chartPHPjQuery的结合使用的例子

 

需求UI

 

 

 解释下这个需求:

1 下方是一个flash的图表

2 上方有复选框,日活跃和周活跃用户

3 右方的一周和一月的span标签选择是显示x坐标轴的时间范围,有昨天起前一周和前一月两个选择

4 点击左边的复选框和右边的span标签都会更新flash统计表

 

实现步骤:

下载open-flash-chart 2.0

这里使用的版本是:

open-flash-chart-2-Lug-Wyrm-Charmer

 

将里面的js(json.js, swfobject.js)php-ofc-libriary文件夹和open-flash-chart.swf

放到服务器目录上

 

3  html的模板使用:

 <div id="c" class="p010" style="height:280px;">

复制代码
                <form name="user_data" action="#" 
                    data-type
="platform_static"
                    data-stat-url
="ajax/aj_static_user_data.php"
                    data-stat-aid
="{{$appinfo.aid}}">
                    <div class="dataHd clearfix">
                        <div class="l">
                            <input class="slc reload_chart"
                            name
="dayuv" 
                            type
="checkbox"
                            checked
="checked"
                            value
="1"
                             
/>
                            <label class="sl">日活跃</label>&nbsp;&nbsp;&nbsp;
                            <input 
                            
class="slc reload_chart" 
                            name
="weekuv" 
                            type
="checkbox" 
                            checked
="checked"
                            value
="2"
                            
/>
                            <label class="cgr">周活跃</label>
                        </div>
                        <div class="r">
                            <input type="hidden" name="range" value="week">
                            <div class="mr5">
                                <span class="week_month cp" name="week">一周</span>
                                <span class="cd"></span>
                                <span class="week_month cp sl" name="month">一月</span>
                            </div>
                        </div>
                    </div>
                </form>
                <div id="user_data" name="flash_chart"></div>
            </div>
复制代码

 

这个模板说明:

1 使用了form表单,这样能增加js的可复用性,form表单作为查询提交,from后面的同级目录下的div作为flash展示的div,所以必须标注id值

   这里将form的name和div的id设置的相同 

2 form表单的属性 

data-type="platform_static"  //说明只要有这个属性的form,提交就是进行flash更新

data-stat-url="ajax/aj_static_user_data.php"  //这个标注是为了标注上更新flash所提交的ajax的地址

 

 

4  javascript(jquery):

reloadLine的函数,这个函数的作用是提交表单,更新flash

复制代码
function reLoadLine(id)
    {
        var form_id = $j("form[name='" + id + "']");
        var aj_url = form_id.attr('data-stat-url') + "?aid="+ form_id.attr('data-stat-aid') +"&"+ form_id.serialize();
        aj_url = encodeURIComponent(aj_url);
        swfobject.embedSWF(
                "open-flash-chart.swf?r="+Math.random() * 100000, id,
                "750", "250", "9.0.0", "expressInstall.swf",
                {"data-file": aj_url}, {'wmode':"transparent"}
        );
复制代码

    } 

几个说明:

 1 使用id作为参数是表示值需要将id传入,就可以将对应的flash进行更新

 2 aj_url = encodeURIComponent(aj_url);  //作为swf传入的url必须进行urlencode

 3 "open-flash-chart.swf?r="+Math.random() * 100000  //这个后面的随机数必须加上,否则有的浏览器会由于缓存的问题而无法更新

 4 {"data-file": aj_url}  //说明取数据去aj_url中取,后面会说明这个ajax如何写

 5 {'wmode':"transparent"} // 这个是表示将flash置于最底层

 6 页面已经导入了json.js, swfobject.js. 并将jquery的换为j

 

5 javascript绑定事件:

复制代码
$j('.reload_chart').change(function(event){
    var target = event.currentTarget;
    var form_id = j(target).parents('form[data-type=platform_static]').attr('name');     reLoadLine(form_id); });j(target).parents('form[data-type=platform_static]').attr('name');     reLoadLine(form_id); });j('.week_month').click(function(event){
    event.preventDefault();
    var target = event.currentTarget;
            
    if($j(target).hasClass('sl'))
    {
        //change the page show
        j(target).removeClass(sl);j(target).removeClass(′sl′);j(target).nextAll('.week_month').addClass('sl');
        $j(target).prevAll('.week_month').addClass('sl');
                
        //change hidden input
        var rangeValue = j(target).attr(name);j(target).attr(′name′);j(target).parent().prevAll("input[name=range]").val(rangeValue);
                
        var form_id = $j(target).parents('form[data-type=platform_static]').attr('name');
        reLoadLine(form_id);
    }
});
复制代码

这个熟悉jquery的同学一看就明白了

就是有一点,再强调一下,这边的jjqueryj相当于jquery中的

 

6 aj_static_user_data.php

View Code 

 这个php有点长,是根据open-flash-chart 2.0的教程改写的

注意点:

1 必须导入正确的ofc-library/open-flash-chart.php 

2 最后的json使用toPrettyString生成 

 

至此,完成open-flash-chart 和 jquery 和 php 的结合使用

 

碰到的问题 

在写的过程中,经常会碰到错误:

"Open Flash Chart IO ERROR Loading test data 

 或者

"can not find y-32.txt"等类型的错误

 最可能的情况是:ajax返回的数据错误,这个可以用fidder调试出来,特别查看里面值为null的字段

 

另外抱怨一下:open-flash-chart的文档真的错误很多,哎~毕竟是免费的 



本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/archive/2012/02/17/2355163.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PHPMailer安装及简单实例(PHP发送邮件不用Smtp类)
PHPMailer安装及简单实例 [ 2006-11-29 14:37:49 | Author: songzi ] Font Size: Large | Medium | Small PHPMailer是一个用PHP写的用于邮件发送的类,有点像Jmail,相信很多新手和我一样,开始很茫然,不知道怎么安装,查找了一下,发现这方面的资料真的少之又少,一个文章被转载千百次,一搜索全是同一个内容,真不知道说什么好,其实打开安装里的readme就一目了然了,闲话少说,安装其实很简单。
1443 0
openstack创建实例无密码登录详解
[root@openstack ~]# ssh-keygen Generating public/private rsa key pair. Enter file in which to save the key (/root/.
1028 0
php封装json通信接口详解及实例
php创建JSON数据详解: ``` <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> ...
1696 0
php soap 实例
php soap编码转换在给CHINAZ资讯(dedecms)做同步bbsmax passport登陆api时,因为bbsmax使用utf-8编码,而资讯这边用的是GBK编码,导致乱码。开始想自己转码,但有点麻烦。
1586 0
ThinkPHP中实例化对象M()和D()的区别,select和find的区别
原文:ThinkPHP中实例化对象M()和D()的区别,select和find的区别 1.ThinkPHP中实例化对象M()和D()的区别 在实例化的过程中,经常使用D方法和M方法,这两个方法的区别在于M方法实例化模型无需用户为每个数据表定义模型类,如果D方法没有找到定义的模型类,则会自动调用M方法。
957 0
PSD转HTML实例教程——利用JQuery插件实现图片滑动效果
之前一段时间,翻译了一些国外的PS网页设计教程,这些教程中都有一些共性,例如包含网页LOGO、导航菜单栏、图片滑动栏、版权信息等。其中在多个教程中都提到了利用JQuery插件实现图片滑动栏。于是在网上搜索了一番,发现类似的插件千千万万,都有各自的特色。
1048 0
+关注
2968
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载