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}

时间: 2014-02-10

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

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

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

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

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

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

通过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实现用户在线时间统计详解

首先介绍一下所涉及的数据表结构,四个字段: 代码如下: 复制代码 代码如下: 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

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网站在线人数统计

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统计文件大小,以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版微信数据统计接口用法示例

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

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(

Shell脚本实现的单机流量统计功能

在网上看到这个单机流量的脚本,挺不错的. 复制代码 代码如下: #!/bin/sh usage(){ echo "Usage: $0 [-i INTERFACE] [-s INTERVAL] [-c COUNT]" echo echo "-i INTERFACE" echo "    The interface to monitor, default is eth0." echo "-s INTERVAL" echo &quo

vbs 字符统计功能模块

字符统计功能模块 复制代码 代码如下: Sub TongJi() Set objFSO = CreateObject("Scripting.FileSystemObject") Set objFile = objFSO.OpenTextFile("ok.txt", 1) strText = objFile.ReadAll All = Len(strText) S="` ~ ! @ # $ % ^ & * ( ) - _ = + \ | [ { ]

单个流量统计,CPU消耗量统计功能的详细说明

从2006-9-28日后的受控端起,主机管理平台支持单个流量统计,CPU消耗量统计功能.注意,此功能只支持windows 20003,不支持windows 2000,下面是常见的问题: 1.这些功能会不会增加服务器的负担?  现在市场上几乎全部的主机系统的日志分析都需要一个网站记录一个日志文件,造成服务器上同时写入几百个日志文件,严重影响硬盘的性能从而增加了服务器的负担,星外科技已充分考虑了这个问题,为了完全解决这个难题,星外虚拟主机管理平台采用的是单日志形式,就是说,就算有一千个网站,一样只用

Python实现获取nginx服务器ip及流量统计信息功能示例

本文实例讲述了Python实现获取nginx服务器ip及流量统计信息功能.分享给大家供大家参考,具体如下: #!/usr/bin/python #coding=utf8 log_file = "/usr/local/nginx/logs/access.log" with open(log_file) as f: contexts = f.readlines() # define ip dict### ip = {} # key为ip信息,value为ip数量(若重复则只增加数量) fl

Yii中的relations数据关联查询及统计功能用法详解

本文实例讲述了Yii中的relations数据关联查询及统计功能用法.分享给大家供大家参考,具体如下: 关联查询,Yii 也支持所谓的统计查询(或聚合查询). 它指的是检索关联对象的聚合信息,例如每个 post 的评论的数量,每个产品的平均等级等. 统计查询只被 HAS_MANY(例如,一个 post 有很多评论) 或 MANY_MANY (例如,一个 post 属于很多分类和一个 category 有很多 post) 关联对象执行. 执行统计查询非常类似于之前描述的关联查询.我们首先需要在 C

Ajax实现对静态页面的文章访问统计功能示例

本文实例讲述了Ajax实现对静态页面的文章访问统计功能.分享给大家供大家参考,具体如下: 众所周知,静态页面不仅速度快,而且对seo也有一定的帮助.前些日子,写了一帖关于<在SAE平台实现WordPress页面纯静态化至KVDB>.我自己使用了一段时间后,发现提速确实很明显.但是随之而来的一个问题就是,由于文章静态化后,页面并不会经过WordPress程序的处理,这样就导致了文章的访问量统计失效.当然,有一个叫做wp-postview的插件是可以解决这个问题的,但是我不是很喜欢插件,因为会拖慢

Linux下局域网流量统计

1:统计10.86.0.0/16网段的内网流量情况 将下面脚本保存成文件traffic-lan.sh(运行后需要等待10秒抓包) tcpdump -nqt src net 10.86.0.0/16 and dst net ! 10.86.0.0/16 \ > /tmp/tcpdump_temp 2>&1 & sleep 10 kill `ps aux | grep tcpdump | grep -v grep | awk '{print $2}'` #awk '{s[$2] +

易语言调用JS制作统计文本字数的代码

调用统计字数js此功能由精易网页调试助手生成代码,配合精易模块使用. 常量数据表 .版本 2 .常量 字数统计js, "<文本长度: 269>" 统计文本字数的代码 .版本 2 .支持库 spec .程序集 窗口程序集_启动窗口 .子程序 文本_字数统计, 整数型, 公开, 用word方式计算正文字数,返回文本字数,汉字算一个,单词算一个,换行符和空格不算. .参数 文本, 文本型, , 需要统计的文本 .局部变量 c, 整数型 .局部变量 n, 整数型 .局部变量 z,

Android中使用ShareSDK集成分享功能的实例代码

引言 现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了,下面切入正题正式开始介绍. 1.ShareSDK开发包及配置 这个不用多说,去他们官网看找SDK开发包和集成文档即可. Android版本地址:http://www.mob.com/downloadDetail/ShareSDK/android. 注意:记得要注册ShareSDK账号获取AppKey哦.这些