PHP實現地圖區域數據統計的方法
- php語言
- 關注:2.18W次
PHP程序開發快,運行快,技術本身學習快。嵌入於HTML:因為PHP可以被嵌入於HTML語言,它相對於其他語言。編輯簡單,實用性強,更適合初學者。以下是小編為大家搜索整理PHP實現地圖區域數據統計的方法,希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!
HTML
和上篇文章使用raphael.js繪製中國地圖一樣,首先在head部分載入raphael.js庫文件和chinamap路徑信息文件。
代碼如下 | |
<script type="text/javascript" src=""></script> 然後在body中需要放置地圖的位置放置div#map。 <div id="map"></div> |
PHP
我們準備一張mysql表名為mapdata,這張表存儲的是產品在各個省份的活躍用户數據。我們使用PHP讀取mysql表中的數據,並將讀取的數據以json格式輸出,並將PHP文件命名為。
代碼如下 | |
$host="localhost";//主機 |
值得注意的是,我們要把mapdata表中各省份的排序與chinamap文件中的各省份順序一致,這樣才能保證讀取的數據能和地圖中的省份對應上。
jQuery
首先我們使用jquery的get()方法獲取json數據。
代碼如下 | |
$(function(){ |
獲取到json數據後,我們先要將json數據轉換為數組,然後我們遍歷整個數組,根據json數據中各省份活躍用户數的多少,我們作一個等級區分,這裏我將等級分為0-5六個等級,活躍用户數越大背景顏色越深,這樣在地圖上顯示就會一目瞭然的看出不同省份的`數據等級程度。繪製地圖的時候和本站上篇文章使用繪製中國地圖介紹的基本一樣,不同之處在於給每個不同省份填充對應的顏色,請看整理好的代碼:
代碼如下 | |
$(function(){ $("",function(json){//獲取數據 var data = string2Array(json);//轉換數組 var flag; var arr = new Array();//定義新數組,對應等級 for(var i=0;i<th;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; } (flag); } //定義顏色 var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"]; //調用繪製地圖方法 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']r = olor(0.9); (function (st, state) { //獲取當前圖形的中心座標 var xx = Box().x + (Box()h / 2); var yy = Box().y + (Box()ht / 2); //修改部分地圖文字偏移座標 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 "內蒙古": xx -= 15; yy += 65; break; default: } //寫入文字 china[state]['text'] = (xx, yy, china[state]['name'])(textAttr); var fillcolor = colors[arr[i]];//獲取對應的顏色 ({fill:fillcolor});//填充背景色 st[0]useover = function () { ate({fill: "#fdd", stroke: "#eee"}, 500); china[state]['text']ont(); ri(); }; st[0]useout = function () { ate({fill: fillcolor, stroke: "#eee"}, 500); china[state]['text']ont(); ri(); }; })(china[state]['path'], state); i++; } }); }); |
上述代碼中,使用var fillcolor = colors[arr[i]];獲取對應等級的顏色值,然後通過({fill:fillcolor});將顏色填充到對應的省份區塊中。此外string2Array()函數是將字符串轉換為數組。
代碼如下 | |
function string2Array(string) { |
這樣,我們可以看到一個不同省份不同背景色的中國地圖,根據不同顏色可以區分省份之間的活躍用户數差異程度,達到預期目標。
- 文章版權屬於文章作者所有,轉載請註明 https://xuezhezhai.com/zh-hk/jsj/php/6g1z2e.html