Php+mysql+jquery China Map Region Data Statistics Example explain _php example

Today I would like to introduce you to the actual application, how to load the data into the map. This article unifies the example, uses Php+mysql+jquery to realize the Chinese map each province data statistic effect.

This example is to count the number of active users in each province as the background, the data from the MySQL database, according to the number of active users in the provinces, divided into different levels, and a different background color shows the degree of activity of the provinces, in line with the actual application needs.

Html

First, load the Raphael.js library file and the Chinamappath.js path information file in the Head section.

<script type= "Text/javascript" src= "jquery.js" ></script> <script type= "Text/javascript" 
Raphael.js "></script> 
<script type=" Text/javascript "src=" Chinamappath.js "></script>

Then place the div#map in the body where you need to place the map.

<div id= "Map" ></div>

Php

We prepare a MySQL table named MapData, which stores active user data for the products in each province. We use PHP to read the data in the MySQL table, output the read data in JSON format, and name the PHP file json.php.

$host = "localhost";//Host 
$db _user= "root";//the database username 
$db _pass= "";//password 
$db _name= "demo";//Database name 
 
$link =mysql_connect ($host, $db _user, $db _pass);//Connection Database 
mysql_select_db ($db _name, $link); 
mysql_query ("SET names UTF8"); 
 
$sql = "Select active from MapData-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 connection

It is important to note that the order of the provinces in the MapData table is consistent with the provinces in the Chinamappath.js file to ensure that the data read can correspond to the provinces in the map.

Jquery

First we use the jquery Get () method to obtain the JSON data.

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

After we get the JSON data, we first convert the JSON data to arrays, and then we iterate through the array, and according to the number of active users in the JSON data, we make a grade distinction, where I divide the hierarchy into 0-5 six levels, the more active users, the darker the background color, In this way, the map shows a clear indication of the level of data levels in different provinces.

Take a look at the sorted code:

$ (function () {$.get ("json.php", function (JSON) {//Get data var/string2array (JSON);//convert array var flag; 
  The var arr = new Array (),///defines the newly-defined, corresponding level 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); 
  
 //define color var colors = ["#d7eef8", "#97d6f5", "#3fbeef", "#00a2e9", "#0084be", "#005c86"]; 
 Call Drawing Map 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[state][' path '].color = Raphael.getcolor (0.9); 
   (Function (St, state) {//Get the center coordinates of the current graph var xx = St.getbbox (). x + (St.getbbox (). WIDTH/2); var yy = St.getbboX (). Y + (St.getbbox (). HEIGHT/2); 
     Modify part of the map text offset coordinate 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 "Macao": 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]], get the color value of the corresponding level, then pass st.attr ({fill:fillcolor}), and fill the color into the corresponding province block. Furthermore, the String2array () function converts a string to an array.

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

Through the above steps, we can see a different province of different background color map of China, according to different colors can distinguish between the number of active users in the provinces to achieve the desired goal, the small partners hope this article for everyone's learning help.