In this example, the number of active users of a product in each province is counted. The data comes from the mysql database and is divided into different levels based on the number of active users in each province, the activity of each province is displayed with different background colors, meeting the actual application requirements.
Results:
HTML
Like the previous article on this site that used raphael. js to draw a map of China, first load the raphael. js library file and the chinamapPath. js path file in the head section.
The Code is as follows: |
Copy code |
<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 position where the map needs to be placed in the body. <Div id = "map"> </div> |
PHP
We have prepared a mysql table named mapdata, which stores active user data of products in various provinces. We use PHP to read data from the mysql table, output the data in json format, and name the php file json. PHP.
The Code is as follows: |
Copy code |
$ Host = "localhost"; // host $ Db_user = "root"; // database username $ 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 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 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. Then we traverse the entire array and make a classification based on the number of active users in each province in the json data, here I will divide the level into six levels: 0-5. The larger the number of active users, the deeper the background color. This will display the data level of different provinces at a glance on the map. This is basically the same as how to use raphael. js to draw a map of China in the previous article on this site. The difference lies in filling the corresponding color for each province. Please refer to the compiled code:
The Code is as follows: |
Copy code |
$ (Function (){ $. Get ("json. php", function (json) {// get data Var data = string2Array (json); // convert the Array
Var flag; Var arr = new Array (); // defines the new Array, corresponding to the 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 the color Var colors = ["# d7eef8", "#97d6f5", "#3 fbeef", "#00a2e9", "# 0084be", "#005c86"];
// Call the Map Drawing Method Varr = 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 ){
// Obtain the central coordinates of the current image Var xx = st. getBBox (). x + (st. getBBox (). width/2 ); Var yy = st. getBBox (). y + (st. getBBox (). height/2 );
// Modify the text offset coordinates of some maps 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]; // obtain the corresponding color.
St. attr ({fill: fillcolor}); // fill in the 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}); fill the color in the corresponding province block. In addition, the string2Array () function converts a string to an array.
The Code is as follows: |
Copy code |
Function string2Array (string ){ Eval ("var result =" + decodeURI (string )); Return result; } |
In this way, we can see a map of China with different backgrounds in different provinces. Different colors can be used to differentiate the number of active users in different provinces to achieve the expected goal.
Instance: http://file.bKjia. c0m/upload/2013/12/chinamap-data.zip