PHP implements map area data statistics-ajax loading data_PHP tutorial

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.

The effect is as shown below

HTML

Similar to the previous article on this site using raphael.js to draw a map of China, first load the raphael.js library file and chimamapPath.js path information file in the head section.

The code is as follows

Copy code

代码如下	复制代码
然后在body中需要放置地图的位置放置div#map。

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

代码如下

复制代码

$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);//关闭连接

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.

代码如下	复制代码
$(function(){     $.get("json.php",function(json){         ...     }); });

The code is as follows

Copy code

$host="localhost";//Host $db_user="root";//Database user name $db_pass="";//Password $db_name="demo";//Database name $link=mysql_connect($host,$db_user,$db_pass);//Connect to the database mysql_select_db($db_name,$link); mysql_query("SET names UTF8"); $sql = "select active from mapdata order by id asc";//Query $query = mysql_query($sql); while($row=mysql_fetch_array($query)){ $arr[] = $row['active']; } echo json_encode($arr);//JSON format mysql_close($link);//Close the connection

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.

The code is as follows	Copy code
$(function(){ $.get("json.php",function(json){ ... }); });

After obtaining the json data, we first need to 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 There are six levels -5. The greater the number of active users, the darker the background color. In this way, when displayed on the map, the data levels of different provinces can be clearly seen. When drawing the map, it is basically the same as the introduction of using raphael.js to draw the map of China in the previous article on this site. The difference is that each different province is filled with the corresponding color. Please see the compiled code:

The code is as follows

Copy code

$(function(){ $.get("json.php",function(json){//Get data var data = string2Array(json);//Convert array ​   var flag; var arr = new Array();//Define a new array, corresponding to the level for(var i=0;i           var d = data[i]; If(d flag = 0;             }else if(d>=100 && d flag = 1;             }else if(d>=500 && d flag = 2;             }else if(d>=2000 && d flag = 3; }else if(d>=5000 && d flag = 4;          }else{ flag = 5;           } arr.push(flag); } //Define color var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"]; ​   //Call the map drawing method 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) {                                                                        //Get the center coordinates of the current graphic           var xx = st.getBBox().x + (st.getBBox().width / 2);             var yy = st.getBBox().y + (st.getBBox().height / 2);                                                                           //Modify the offset coordinates of some map text                 switch (china[state]['name']) { case "Jiangsu":                           xx += 5;                 yy -= 10; break; case "Hebei":                            xx -= 10;                   yy += 20; break; case "Tianjin":                          xx += 10;                   yy += 10; break; case "Shanghai":                          xx += 10; break; case "Guangdong":                   yy -= 10; break; case "Macau":                   yy += 10; break; case "Hong Kong":                          xx += 20;                   yy += 5; break; case "Gansu":                            xx -= 40;                   yy -= 30; break; case "Shaanxi":                          xx += 5;                   yy += 10; break; case "Inner Mongolia":                           xx -= 15;                   yy += 65; break;                                    default:                } //Write text              china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);                                                                                          var fillcolor = colors[arr[i]];//Get the corresponding color                                                                                          st.attr({fill:fillcolor});//Fill background color                                                                                          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.

The code is as follows

Copy code

代码如下	复制代码
function string2Array(string) {      eval("var result = " + decodeURI(string));      return result;  }

function string2Array(string) {

eval("var result = " + decodeURI(string));
Return result;

}

In this way, 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.

Example download address: http://file.bKjia.c0m/upload/2013/12/chinamap-data.zip http://www.bkjia.com/PHPjc/633107.htmlwww.bkjia.com

true

http: //www.bkjia.com/PHPjc/633107.html

TechArticleThis example is based on statistics of the number of active users of a product in each province. The data comes from the mysql database. According to each The number of active users in the province is divided into different levels and displayed with different background colors...