Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "combining PHP, Mysql and jQuery to achieve the statistical effect of data of various provinces on the map of China". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Today I'm going to show you how to load data into a map in practical applications. Combined with an example, this paper uses PHP+Mysql+jQuery to realize the statistical effect of the data of each province of the map of China.

This example takes the statistics of the number of active users of a product in each province as the background, and the data comes from the mysql database, which is divided into different levels according to the number of active users in each province, and shows the active level of each province with different background colors, which meets the needs of practical applications.

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 body where you need to place the map.

PHP

We prepare a mysql table called mapdata, which stores the active user data of the product 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"; / / database user name $db_pass= "; / / password $db_name=" demo "; / / database name $link=mysql_connect ($host,$db_user,$db_pass); / / connect to 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 chinamapPath.js file, so as to ensure that the data read corresponds to the provinces in the map.

JQuery

First we use the get () method of jquery to get the 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 level into six levels: 0-5. The larger the number of active users, the darker the background color, so that the display on the map will clearly see the level of data in different provinces.

Please look at the sorted code:

$(function () {$.get ("json.php", function (json) {/ / get data var data = string2Array (json); / / transform array var flag; var arr = new Array (); / / define a new array, corresponding to the level for (var iArray)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.