Php+mysql+jquery China Map Regional data Statistics Examples, jquery examples of _php tutorials

Php+mysql+jquery China Map Area Data Statistics Examples of examples of jquery explained

Today I'm going to show you how to load data into a map in real-world applications. In this paper, we use php+mysql+jquery to realize the statistic effect of data in China map provinces.

In this example, statistics on the number of active users in each province of a product background, data from the MySQL database, according to the number of active users in each province, divided into different levels, and different background color to show the level of activity in 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.

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

Php

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

$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);//Connection 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 connection

It is important to note that the order of the provinces in the MapData table is the same as the provinces in the Chinamappath.js file, so that the data read can correspond to the provinces in the map.

Jquery

First we use jquery's Get () method to get the JSON data.

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

After we get to the JSON data, we first convert the JSON data to an array, and then we iterate over the entire arrays, based on the number of active users in each province of the JSON data, we make a hierarchical distinction, where I divide the hierarchy into 0-5 six levels, the larger the number of active users, the deeper the background color, This will show on the map at a glance to see the level of data in different provinces.

Take a look at the compiled code:

$ (function () {$.get ("json.php", function (JSON) {///get Data var = string2array (JSON);//convert array var flag; var arr = new Array ();//defines the newly-defined arrays, corresponding to the level for (Var i=0;i
 
  
=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 the Draw map method var R = Raphael ("Map", 600, 500);    Paintmap (R);      var textattr = {"Fill": "#000", "font-size": "12px", "cursor": "Pointer"};  var i=0;   For (Var-in-China) {china[state][' path '].color = Raphael.getcolor (0.9);    (Function (St, state) {//Gets the center coordinate of the current drawing 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 "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]];//Gets 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, and then through St.attr ({fill:fillcolor}), 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 different province of different background color map of China, according to different colors can distinguish between the number of active users between the degree of difference, to achieve the desired goal, the small partners hope that this article is helpful to everyone's study.

http://www.bkjia.com/PHPjc/1060094.html www.bkjia.com true http://www.bkjia.com/PHPjc/1060094.html techarticle php+mysql+jquery China Map Regional Data Statistics Examples, examples of jquery explained today I would like to introduce to you in practical application, how to load data into the map. This article combines examples ...

