php和jquery实现地图区域数据统计展示数据示例

HTML

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框。

代码如下:

<div id="map"></div>
<div id="tip"></div>

jQuery

通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。当鼠标滑向省份区块时,通过e.pageX和e.pageY定位鼠标坐标,然后通过jquery的css()方法定位提示框div#tip,并且将对应省份的的名称和活跃用户数加到提示框里并展现出来,请看代码:

代码如下:

$(function(){
    $.get("json.php",function(json){

......//这里省略代码若干

var i=0;
    for (var state in china) {
        china[state]['path'].color = Raphael.getColor(0.9);
        (function (st, state) {
            var prodata = data[i];
            var fillcolor = colors[arr[i]];
            st.attr({fill:fillcolor});//填充背景色
            xOffset = 70;
            yOffset = 180;
            st.hover(function(e){//鼠标滑向
                st.animate({fill: "#fdd", stroke: "#eee"}, 500);
                R.safari();                
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"}).fadeIn("fast")
                .html("<h4>"+china[state]['name']+"</h4><p>活跃用户数:"+prodata+"</p>");
            },function(){//鼠标离开
                st.animate({fill: fillcolor, stroke: "#eee"}, 500);
                R.safari();
                $("#tip").hide();
            });

st.mousemove(function(e){//鼠标移动
                $("#tip").css({"top":(e.pageY-xOffset)+"px","left":(e.pageX-yOffset)+"px"});
                R.safari();
            });

})(china[state]['path'], state);
         i++;
    }
    });
});

以上代码可以看出,通过jQuery的hover()鼠标滑向省份区块时,调用弹出提示框,并将数据载入显示在提示框中,而值得关注的是,我们还需要加一个效果,就是鼠标在省份区块上移动mousemove()的时候,也应该调用提示框跟随鼠标一起移动,否则的话当鼠标在一个省份区块内滑动的话提示框位置不会变化,这样会影响体验效果,小小的改动可以提升用户体验。
最后,如果您需要定制提示框的效果的话,可以设置提示框的CSS样式,本例简单的CSS代码如下:

代码如下:

#tip{position:absolute; width:180px; border:1px solid #d3d3d3; background:#fff;display:none;
-moz-border-radius:5px; -webkit-border-radius:5px; overflow:hidden; border-radius:5px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
box-shadow:1px 1px 2px rgba(0,0,0,.2);}
#tip h4{height:28px; line-height:28px; padding-left:6px; background:#f0f0f0}
#tip p{line-height:24px; padding:2px 4px}

(0)

相关推荐

  • PHP+Mysql+jQuery中国地图区域数据统计实例讲解

    今天我要给大家介绍在实际应用中,如何把数据载入到地图中.本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果. 本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,并以不同的背景色显示各省份的活跃程度,符合实际应用需求. HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件. <script type="text/javascript" src=

  • php版微信数据统计接口用法示例

    本文实例讲述了php版微信数据统计接口用法.分享给大家供大家参考,具体如下: php版微信数据统计接口其实是非常的好用了在前版本还没有此功能是后面的版本增加上去了,下面来看一个php版微信数据统计接口的例子: 微信在1月6日时放出了新的数据分析接口传送门: 请注意: 1.接口侧的公众号数据的数据库中仅存储了2014年12月1日之后的数据,将查询不到在此之前的日期,即使有查到,也是不可信的脏数据: 2.请开发者在调用接口获取数据后,将数据保存在自身数据库中,即加快下次用户的访问速度,也降低了微信侧

  • php+memcache实现的网站在线人数统计代码

    今天闲来无事,想在博客统计中显示在线人数.在网上找了好多例子,不是数据库存储数据就是文件存储,代码也看起来过于复杂. 晚上回来后,构思了下,看到我服务器中安装有 Memcache 服务,何不用 Memcache 实现呢. 下面就来讲下实现过程: 效果图: 实现代码: <?php $mc = new Memcache (); // 连接memcache $mc->connect ( "127.0.0.1", 11211 ); // 获取 在线用户 IP 和 在线时间数据 $o

  • php中3种方法统计字符串中每种字符的个数并排序

    复制代码 代码如下: <?php //这个方法纯粹是背函数,不解释: function countStr($str){ $str_array=str_split($str); $str_array=array_count_values($str_array); arsort($str_array); return $str_array; } //以下是例子: $str="asdfgfdas323344##$\$fdsdfg*$**$*$**$$443563536254fas";

  • PHP实现的统计数据功能详解

    本文实例讲述了PHP实现的统计数据功能.分享给大家供大家参考,具体如下: 统计,就是把基本的数据,整合起来. 用到sql的,有group by 功能,count功能,order by功能等等. sql将收集的数据,进行统计分析. 一般情况下,sql处理后得到的数据,还要通过php的逻辑来进行整理. 以一定的格式,展示到前台. 一般都是以数组的方式展示,这也是数据结构的概念. 看这张图片,基本想想结构大概为 {上线数,出单总数,核过总数,总人均,总核率,{(坐席人1,工号1,出单数1,发货数1,核

  • 通过php快速统计某个数据库中每张表的数据量

    所以自己简单写了几行代码用来实现以上需求 执行结果: 复制代码 代码如下: <?php $conn=mysql_connect('localhost','root',''); mysql_select_db('数据库',$conn); $sql="SELECT information_schema.TABLES.TABLE_NAME FROM information_schema. TABLES WHERE table_schema = '数据库'"; $res=mysql_qu

  • php流量统计功能的实现代码

    流量统计功能 显示效果: 总访问量:399 今日流量:14 昨日流量:16 本代码仅供学习交流,其中必有不妥之处.请见谅! -- -- 表的结构 `mycounter` -- 复制代码 代码如下: CREATE TABLE `mycounter` ( `id` int(11) NOT NULL auto_increment, `Counter` int(11) NOT NULL, `CounterLastDay` int(10) default NULL, `CounterToday` int(

  • php统计文件大小,以GB、MB、KB、B输出

    使用filesize()函数命令实现文件大小的统计,要求:1,以GB.MB.KB.B中的一个输出:2.数量级必须大于1小于1024,并保留两位小数: 开始动工: 复制代码 代码如下: $len = filesize("1.rmvb"); $i=4; while($i){ if(($out=$len/pow(1024,$i))>1.0||$i==1){ switch($i){ case 4: {printf("%.2f TB",$out);break;} cas

  • 也谈php网站在线人数统计

    function checkOnline($userid,$tempid=null)      {      $conn = connect(); //对于所有用户      //先设置自己为在线      $stmt = "UPDATE ".DB_NAME.".USER SET IsOnline='Y' WHERE UserID=".$userid;      $result = query($stmt,$conn);      //info($stmt);   

  • php实现用户在线时间统计详解

    首先介绍一下所涉及的数据表结构,四个字段: 代码如下: 复制代码 代码如下: uid<int(10)> :用户id session_id<varchar(40)> :用户登录后系统产生的session_id,PHP可是使用session_id()函数获取 login_time<int(10)> :登录时间 logout_time<int(10)> :登出时间 1.客户端定时发送请求到服务器端.实现方法是在用户登录后,将uid,session_id,login

随机推荐