PHP Mysql jQuery China map area data statistics example explanation, jquery example explanation_PHP tutorial

PHP Mysql jQuery China map regional data statistics example explanation, jquery example explanation

Today I will introduce to you how to load data into the map in practical applications. This article combines examples and uses PHP Mysql jQuery to achieve statistical effects on the data of each province on the Chinese map.

This example is based on counting the number of active users of a certain product in each province. The data comes from the mysql database. According to the number of active users in each province, it is divided into different levels, and the activity level of each province is displayed with different background colors. Meet actual application requirements.

HTML

First load the raphael.js library file and chimamapPath.js path information file in the head section.

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

Then place div#map in the body where the map needs to be placed.

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

PHP

We prepare a mysql table named mapdata. This table stores the active user data of the product in each province. We use PHP to read the data in the mysql table and output the read data in json format, and name the PHP file 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);//关闭连接

It is worth noting that we need to sort the provinces in the mapdata table in the same order as the provinces in the chimamapPath.js file, so as to ensure that the read data can correspond to the provinces in the map.

jQuery

First we use jquery’s get() method to obtain json data.

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

After obtaining the json data, we first convert the json data into an array, and then we traverse the entire array. According to the number of active users in each province in the json data, we make a grade distinction. Here I divide the grade into 0 -5 six levels, the greater the number of active users, the darker the background color, so that when displayed on the map, the data levels of different provinces can be clearly seen.

Please see the compiled code:

$(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++; 
 } 
 }); 
});

In the above code, use var fillcolor = colors[arr[i]]; to obtain the color value of the corresponding level, and then use st.attr({fill:fillcolor}); to fill the color into the corresponding province block. In addition, the string2Array() function converts a string into an array.

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

Through the above steps, we can see a map of China with different background colors in different provinces. According to different colors, we can distinguish the difference in the number of active users between provinces and achieve the expected goal. Friends, I hope this article will be useful to everyone. learning helps.

http://www.bkjia.com/PHPjc/1060094.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1060094.htmlTechArticlePHP Mysql jQuery China map regional data statistics example explanation, jquery example explanation Today I want to introduce to you its practical application , how to load data into the map. This article combines examples...