使用過百度統(tǒng)計或者cnzz統(tǒng)計的童鞋應(yīng)該知道，后臺有一個地圖統(tǒng)計，不同訪問量的省份顯示的顏色也不一樣，今天我將帶領(lǐng)大家開發(fā)一個這樣的案例。上一篇《使用raphael.js繪制中國地圖》文章中，我給大家介紹了如何使用raphael.js繪制中國地圖，今天我要給大家介紹在實際應(yīng)用中，如何把數(shù)據(jù)載入到地圖中。本文結(jié)合實例，使用PHP+Mysql+jQuery實現(xiàn)中國地圖各省份數(shù)據(jù)統(tǒng)計效果。

本例以統(tǒng)計某產(chǎn)品在各省份的活躍用戶數(shù)通ky"http://www.it165.net/qq/" target="_blank" html' target='_blank'>class="keylink">qqxs76wo6zK/b7dwLTUtNPabXlzcWzK/b7dv+KjrLj5vt2498qht921xLvu1L7Tw7unyv2jrLfWs8myu82stci8tqOssqLS1LK7zay1xLGzvrDJq8/Uyr6498qht921xLvu1L6zzLbIo6y3+7rPyrW8ytOm08PQ6MfzoaM8L3A+CjxoND5IVE1MPC9oND4KPHA+us2xvtW+yc/Gqs7E1cKhtsq508NyYXBoYWVsLmpzu+bWxtbQufq12M28obfSu9H5o6zK18/I1NpoZWFksr+31tTYyOtyYXBoYWVsLmpzv+LOxLz+us1jaGluYW1hcFBhdGguanPCt7620MXPos7EvP6hozwvcD4KCjxwcmUgY2xhc3M9"brush:java;"><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="raphael.js"></script> <script type="text/javascript" src="chinamapPath.js"></script>

然后在body中需要放置地圖的位置放置div#map。

<div id="map"></div> 

我們準(zhǔn)備一張mysql表名為mapdata，這張表存儲的是產(chǎn)品在各個省份的活躍用戶數(shù)據(jù)。我們使用PHP讀取mysql表中的數(shù)據(jù)，并將讀取的數(shù)據(jù)以json格式輸出，并將PHP文件命名為json.php。

$host="localhost";//主機 $db_user="root";//數(shù)據(jù)庫用戶名 $db_pass="";//密碼 $db_name="demo";//數(shù)據(jù)庫名稱  $link=mysql_connect($host,$db_user,$db_pass);//連接數(shù)據(jù)庫 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);//關(guān)閉連接 

值得注意的是，我們要把mapdata表中各省份的排序與chinamapPath.js文件中的各省份順序一致，這樣才能保證讀取的數(shù)據(jù)能和地圖中的省份對應(yīng)上。

首先我們使用jquery的get()方法獲取json數(shù)據(jù)。

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

獲取到j(luò)son數(shù)據(jù)后，我們先要將json數(shù)據(jù)轉(zhuǎn)換為數(shù)組，然后我們遍歷整個數(shù)組，根據(jù)json數(shù)據(jù)中各省份活躍用戶數(shù)的多少，我們作一個等級區(qū)分，這里我將等級分為0-5六個等級，活躍用戶數(shù)越大背景顏色越深，這樣在地圖上顯示就會一目了然的看出不同省份的數(shù)據(jù)等級程度。繪制地圖的時候和本站上篇文章《使用raphael.js繪制中國地圖》介紹的基本一樣，不同之處在于給每個不同省份填充對應(yīng)的顏色，請看整理好的代碼：

$(function(){     $.get("json.php",function(json){//獲取數(shù)據(jù)     var data = string2Array(json);//轉(zhuǎn)換數(shù)組          var flag;     var arr = new Array();//定義新數(shù)組，對應(yīng)等級     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);     }     //定義顏色     var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];          //調(diào)用繪制地圖方法     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) {                          //獲取當(dāng)前圖形的中心坐標(biāo)             var xx = st.getBBox().x + (st.getBBox().width / 2);             var yy = st.getBBox().y + (st.getBBox().height / 2);                          //修改部分地圖文字偏移坐標(biāo)             switch (china[state]['name']) {                 case "江蘇":                     xx += 5;                     yy -= 10;                     break;                 case "河北":                     xx -= 10;                     yy += 20;                     break;                 case "天津":                     xx += 10;                     yy += 10;                     break;                 case "上海":                     xx += 10;                     break;                 case "廣東":                     yy -= 10;                     break;                 case "澳門":                     yy += 10;                     break;                 case "香港":                     xx += 20;                     yy += 5;                     break;                 case "甘肅":                     xx -= 40;                     yy -= 30;                     break;                 case "陜西":                     xx += 5;                     yy += 10;                     break;                 case "內(nèi)蒙古":                     xx -= 15;                     yy += 65;                     break;                 default:             }             //寫入文字             china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);                          var fillcolor = colors[arr[i]];//獲取對應(yīng)的顏色                          st.attr({fill:fillcolor});//填充背景色                          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++;     }     }); }); 

上述代碼中，使用var fillcolor = colors[arr[i]];獲取對應(yīng)等級的顏色值，然后通過st.attr({fill:fillcolor});將顏色填充到對應(yīng)的省份區(qū)塊中。此外string2Array()函數(shù)是將字符串轉(zhuǎn)換為數(shù)組。

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

這樣，我們可以看到一個不同省份不同背景色的中國地圖，根據(jù)不同顏色可以區(qū)分省份之間的活躍用戶數(shù)差異程度，達到預(yù)期目標(biāo)。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。