PHP+Mysql+jQuery实现中国地图区域数据统计

使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例。上一篇《使用raphael.js绘制中国地图》文章中,我给大家介绍了如何使用raphael.js绘制中国地图,今天我要给大家介绍在实际应用中,如何把数据载入到地图中。本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。

PHP+Mysql+jQuery实现中国地图区域数据统计

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

HTML

和本站上篇文章《使用raphael.js绘制中国地图》一样,首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

Html代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计
  1. <script type="text/javascript" src="jquery.js"></script>    
  2. <script type="text/javascript" src="raphael.js"></script>    
  3. <script type="text/javascript" src="chinamapPath.js"></script>  

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

Html代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计
  1. <div id="map"></div>   

 PHP

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

  1. $host="localhost";//主机   
  2. $db_user="root";//数据库用户名   
  3. $db_pass="";//密码   
  4. $db_name="demo";//数据库名称   
  5.    
  6. $link=mysql_connect($host,$db_user,$db_pass);//连接数据库   
  7. mysql_select_db($db_name,$link);   
  8. mysql_query("SET names UTF8");   
  9.    
  10. $sql = "select active from mapdata order by id asc";//查询   
  11. $query = mysql_query($sql);   
  12.    
  13. while($row=mysql_fetch_array($query)){   
  14.     $arr[] = $row[‘active‘];   
  15. }   
  16. echo json_encode($arr);//JSON格式   
  17. mysql_close($link);//关闭连接   

 

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

jQuery

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

Js代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计
  1. $(function(){    
  2.     $.get("json.php",function(json){    
  3.         ...    
  4.     });    
  5. });  

 

获取到json数据后,我们先要将json数据转换为数组,然后我们遍历整个数组,根据json数据中各省份活跃用户数的多少,我们作一个等级区分,这里我将等级分为0-5六个等级,活跃用户数越大背景颜色越深,这样在地图上显示就会一目了然的看出不同省份的数据等级程度。绘制地图的时候和本站上篇文章《使用raphael.js绘制中国地图》介绍的基本一样,不同之处在于给每个不同省份填充对应的颜色,请看整理好的代码:

Js代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计
  1. $(function(){    
  2.     $.get("json.php",function(json){//获取数据    
  3.     var data = string2Array(json);//转换数组    
  4.         
  5.     var flag;    
  6.     var arr = new Array();//定义新数组,对应等级    
  7.     for(var i=0;i<data.length;i++){    
  8.         var d = data[i];    
  9.         if(d<100){    
  10.             flag = 0;    
  11.         }else if(d>=100 && d<500){    
  12.             flag = 1;    
  13.         }else if(d>=500 && d<2000){    
  14.             flag = 2;    
  15.         }else if(d>=2000 && d<5000){    
  16.             flag = 3;    
  17.         }else if(d>=5000 && d<10000){    
  18.             flag = 4;    
  19.         }else{    
  20.             flag = 5;    
  21.         }    
  22.         arr.push(flag);    
  23.     }    
  24.     //定义颜色    
  25.     var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];    
  26.         
  27.     //调用绘制地图方法    
  28.     var R = Raphael("map", 600, 500);    
  29.     paintMap(R);    
  30.         
  31.     var textAttr = {    
  32.         "fill""#000",    
  33.         "font-size""12px",    
  34.         "cursor""pointer"    
  35.     };    
  36.                 
  37.     var i=0;    
  38.     for (var state in china) {    
  39.         china[state][‘path‘].color = Raphael.getColor(0.9);    
  40.         (function (st, state) {    
  41.                 
  42.             //获取当前图形的中心坐标    
  43.             var xx = st.getBBox().x + (st.getBBox().width / 2);    
  44.             var yy = st.getBBox().y + (st.getBBox().height / 2);    
  45.                 
  46.             //修改部分地图文字偏移坐标    
  47.             switch (china[state][‘name‘]) {    
  48.                 case "江苏":    
  49.                     xx += 5;    
  50.                     yy -= 10;    
  51.                     break;    
  52.                 case "河北":    
  53.                     xx -= 10;    
  54.                     yy += 20;    
  55.                     break;    
  56.                 case "天津":    
  57.                     xx += 10;    
  58.                     yy += 10;    
  59.                     break;    
  60.                 case "上海":    
  61.                     xx += 10;    
  62.                     break;    
  63.                 case "广东":    
  64.                     yy -= 10;    
  65.                     break;    
  66.                 case "澳门":    
  67.                     yy += 10;    
  68.                     break;    
  69.                 case "香港":    
  70.                     xx += 20;    
  71.                     yy += 5;    
  72.                     break;    
  73.                 case "甘肃":    
  74.                     xx -= 40;    
  75.                     yy -= 30;    
  76.                     break;    
  77.                 case "陕西":    
  78.                     xx += 5;    
  79.                     yy += 10;    
  80.                     break;    
  81.                 case "内蒙古":    
  82.                     xx -= 15;    
  83.                     yy += 65;    
  84.                     break;    
  85.                 default:    
  86.             }    
  87.             //写入文字    
  88.             china[state][‘text‘] = R.text(xx, yy, china[state][‘name‘]).attr(textAttr);    
  89.                 
  90.             var fillcolor = colors[arr[i]];//获取对应的颜色    
  91.                 
  92.             st.attr({fill:fillcolor});//填充背景色    
  93.                 
  94.             st[0].onmouseover = function () {    
  95.                 st.animate({fill: "#fdd", stroke: "#eee"}, 500);    
  96.                 china[state][‘text‘].toFront();    
  97.                 R.safari();    
  98.             };    
  99.             st[0].onmouseout = function () {    
  100.                 st.animate({fill: fillcolor, stroke: "#eee"}, 500);    
  101.                 china[state][‘text‘].toFront();    
  102.                 R.safari();    
  103.             };    
  104.                         
  105.          })(china[state][‘path‘], state);    
  106.          i++;    
  107.     }    
  108.     });    
  109. });   

 

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

Js代码
  1. function string2Array(string) {     
  2.     eval("var result = " + decodeURI(string));     
  3.     return result;     
  4. }   

 

这样,我们可以看到一个不同省份不同背景色的中国地图,根据不同颜色可以区分省份之间的活跃用户数差异程度,达到预期目标。

PHP+Mysql+jQuery实现中国地图区域数据统计

上一篇:在Hibernate中使用HibernateTemplate来进行包含sql语句的查询


下一篇:ASP连接sql server实例解析