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

今天我要给大家介绍在实际应用中,如何把数据载入到地图中。本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。

本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,并以不同的背景色显示各省份的活跃程度,符合实际应用需求。

HTML

首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地图的位置放置div#map。

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

PHP

我们准备一张mysql表名为mapdata,这张表存储的是产品在各个省份的活跃用户数据。我们使用PHP读取mysql表中的数据,并将读取的数据以json格式输出,并将PHP文件命名为json.php。

$host="localhost";//主机
$db_user="root";//数据库用户名
$db_pass="";//密码
$db_name="demo";//数据库名称 

$link=mysql_connect($host,$db_user,$db_pass);//连接数据库
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8"); 

$sql = "select active from mapdata order by id asc";//查询
$query = mysql_query($sql); 

while($row=mysql_fetch_array($query)){
  $arr[] = $row['active'];
}
echo json_encode($arr);//JSON格式
mysql_close($link);//关闭连接

值得注意的是,我们要把mapdata表中各省份的排序与chinamapPath.js文件中的各省份顺序一致,这样才能保证读取的数据能和地图中的省份对应上。

jQuery

首先我们使用jquery的get()方法获取json数据。

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

获取到json数据后,我们先要将json数据转换为数组,然后我们遍历整个数组,根据json数据中各省份活跃用户数的多少,我们作一个等级区分,这里我将等级分为0-5六个等级,活跃用户数越大背景颜色越深,这样在地图上显示就会一目了然的看出不同省份的数据等级程度。

请看整理好的代码:

$(function(){
 $.get("json.php",function(json){//获取数据
 var data = string2Array(json);//转换数组 

 var flag;
 var arr = new Array();//定义新数组,对应等级
 for(var i=0;i<data.length;i++){
  var d = data[i];
  if(d<100){
   flag = 0;
  }else if(d>=100 && d<500){
   flag = 1;
  }else if(d>=500 && d<2000){
   flag = 2;
  }else if(d>=2000 && d<5000){
   flag = 3;
  }else if(d>=5000 && d<10000){
   flag = 4;
  }else{
   flag = 5;
  }
  arr.push(flag);
 }
 //定义颜色
 var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"]; 

 //调用绘制地图方法
 var R = Raphael("map", 600, 500);
 paintMap(R); 

 var textAttr = {
  "fill": "#000",
  "font-size": "12px",
  "cursor": "pointer"
 }; 

 var i=0;
 for (var state in china) {
  china[state]['path'].color = Raphael.getColor(0.9);
  (function (st, state) { 

   //获取当前图形的中心坐标
   var xx = st.getBBox().x + (st.getBBox().width / 2);
   var yy = st.getBBox().y + (st.getBBox().height / 2); 

   //修改部分地图文字偏移坐标
   switch (china[state]['name']) {
    case "江苏":
     xx += 5;
     yy -= 10;
     break;
    case "河北":
     xx -= 10;
     yy += 20;
     break;
    case "天津":
     xx += 10;
     yy += 10;
     break;
    case "上海":
     xx += 10;
     break;
    case "广东":
     yy -= 10;
     break;
    case "澳门":
     yy += 10;
     break;
    case "香港":
     xx += 20;
     yy += 5;
     break;
    case "甘肃":
     xx -= 40;
     yy -= 30;
     break;
    case "陕西":
     xx += 5;
     yy += 10;
     break;
    case "内蒙古":
     xx -= 15;
     yy += 65;
     break;
    default:
   }
   //写入文字
   china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr); 

   var fillcolor = colors[arr[i]];//获取对应的颜色 

   st.attr({fill:fillcolor});//填充背景色 

   st[0].onmouseover = function () {
    st.animate({fill: "#fdd", stroke: "#eee"}, 500);
    china[state]['text'].toFront();
    R.safari();
   };
   st[0].onmouseout = function () {
    st.animate({fill: fillcolor, stroke: "#eee"}, 500);
    china[state]['text'].toFront();
    R.safari();
   }; 

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

上述代码中,使用var fillcolor = colors[arr[i]];获取对应等级的颜色值,然后通过st.attr({fill:fillcolor});将颜色填充到对应的省份区块中。此外string2Array()函数是将字符串转换为数组。

function string2Array(string) {
  eval("var result = " + decodeURI(string));
  return result;
}

通过以上步骤,我们就可以看到一个不同省份不同背景色的中国地图,根据不同颜色可以区分省份之间的活跃用户数差异程度,达到预期目标,小伙伴们希望这篇文章对大家的学习有所帮助。

时间: 2015-10-09

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实现的统计数据功能详解

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

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版微信数据统计接口用法示例

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

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+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和jquery实现地图区域数据统计展示数据示例

HTML 首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件,本文不重复写下,唯一不同的地方是需要在body中加一个div#tip,用来展示地图信息的提示框. 复制代码 代码如下: <div id="map"></div> <div id="tip"></div> jQuery 通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数

iOS利用Runtime实现友盟页面数据统计的功能示例

前言 一般项目中集成统计功能随因产品类型不同而使用功能不同,但大多数统计一般只有一个目的,就是记录用户习惯,研究用户习惯,从而为用户带来更好的体验,本文主要介绍了关于iOS用Runtime实现友盟页面数据统计功能的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.概念 1.实现页面的统计,需要在每一个类中实现这个方法: - (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [

PHP+MySQL实现对一段时间内每天数据统计优化操作实例

本文实例讲述了PHP+MySQL实现对一段时间内每天数据统计优化操作.分享给大家供大家参考,具体如下: 在互联网项目中,对项目的数据分析必不可少.通常会统计某一段时间内每天数据总计变化趋势调整营销策略.下面来看以下案例. 案例 在电商平台中通常会有订单表,记录所有订单信息.现在我们需要统计某个月份每天订单数及销售金额数据从而绘制出如下统计图,进行数据分析. 订单表数据结构如下: order_id order_sn total_price enterdate 25396 A4E610E250C2D

PHP 使用Echarts生成数据统计报表的实现代码

echarts统计,简单示例 先看下效果图 看下代码 HTML页面 为ECharts准备一个Dom,宽高自定义 <div class="panel panel-info"> <div class="panel-body"> <div id="echart_show" style="height:500px"></div> </div> </div> js文

基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

SQLServer 2008 R2中使用Cross apply统计最新数据和最近数据

使用 APPLY 运算符可以为实现查询操作的外部表表达式返回的每个行调用表值函数.表值函数作为右输入,外部表表达式作为左输入.通过对右输入求值来获得左输入每一行的计算结果,生成的行被组合起来作为最终输出.APPLY 运算符生成的列的列表是左输入中的列集,后跟右输入返回的列的列表. 注意:若要使用 APPLY,数据库兼容级别必须至少为 90. APPLY 有两种形式:CROSS APPLY 和 OUTER APPLY.CROSS APPLY 仅返回外部表中通过表值函数生成结果集的行.OUTER A

jQuery 实时保存页面动态添加的数据的示例

本文介绍了jQuery 实时保存页面动态添加的数据的示例,分享给大家,具体如下: 需求:用户填写的东西,必须要实时保存 分析:监听用户操作事件,如:change.keyup 等,向后端发送请求 实际情况: 用户填写的表单,是通过 JavaScript 动态新增的,这就需要使用为动态新增元素绑定事件. 发送请求给后端,取决于前面的必填项是否已经完整填写. 必须区分用户是动态新增了填写栏目呢?还是在修改? 当前事件对象是什么?怎么通过该对象获取用户输入的数据? 用户多次修改同一栏目,必须传送带有 I