Home php教程 php手册 PHP+Mysql+jQuery实现中国地图区域数据统计

PHP+Mysql+jQuery实现中国地图区域数据统计

Jun 06, 2016 pm 07:53 PM
Map of China area accomplish data

使用raphael.js绘制中国地图 》文章中,我给大家介绍了如何使用raphael.js绘制中国地图,今天我要给大家介绍在实际应用中,如何把数据载入到地图中。本文结合实例,使用PHPMysqljQuery实现中国地图各省份数据统计效果。 本例以统计某产品在各省份的活跃用户

使用raphael.js绘制中国地图》文章中,我给大家介绍了如何使用raphael.js绘制中国地图,今天我要给大家介绍在实际应用中,如何把数据载入到地图中。本文结合实例,使用PHP+Mysql+jQuery实现中国地图各省份数据统计效果。

PHP+Mysql+jQuery实现中国地图区域数据统计

本例以统计某产品在各省份的活跃用户数为背景,数据来源于mysql数据库,根据各省份的活跃用户数,分成不同等级,并以不同的背景色显示各省份的活跃程度,符合实际应用需求。

HTML

和本站上篇文章《使用raphael.js绘制中国地图》一样,首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。

Html代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计

  1. script type="text/javascript" src="jquery.js">script>    
  2. script type="text/javascript" src="raphael.js">script>    
  3. script type="text/javascript" src="chinamapPath.js">script>  

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

Html代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计

  1. div id="map">div>   

 PHP

我们准备一张mysql表名为mapdata,这张表存储的是产品在各个省份的活跃用户数据。我们使用PHP读取mysql表中的数据,并将读取的数据以json格式输出,并将PHP文件命名为json.php。

[php] view plaincopy

  1. $host="localhost";//主机   
  2. $db_user="root";//数据库用户名   
  3. $db_pass="";//密码   
  4. $db_name="demo";//数据库名称   
  5.    
  6. $link=mysql_connect($host,$db_user,$db_pass);//连接数据库   
  7. mysql_select_db($db_name,$link);   
  8. mysql_query("SET names UTF8");   
  9.    
  10. $sql = "select active from mapdata order by id asc";//查询   
  11. $query = mysql_query($sql);   
  12.    
  13. while($row=mysql_fetch_array($query)){   
  14.     $arr[] = $row['active'];   
  15. }   
  16. echo json_encode($arr);//JSON格式   
  17. mysql_close($link);//关闭连接   

 

值得注意的是,我们要把mapdata表中各省份的排序与chinamapPath.js文件中的各省份顺序一致,这样才能保证读取的数据能和地图中的省份对应上。

jQuery

首先我们使用jquery的get()方法获取json数据。

Js代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计

  1. $(function(){    
  2.     $.get("json.php",function(json){    
  3.         ...    
  4.     });    
  5. });  

 

获取到json数据后,我们先要将json数据转换为数组,然后我们遍历整个数组,根据json数据中各省份活跃用户数的多少,我们作一个等级区分,这里我将等级分为0-5六个等级,活跃用户数越大背景颜色越深,这样在地图上显示就会一目了然的看出不同省份的数据等级程度。绘制地图的时候和本站上篇文章《使用raphael.js绘制中国地图》介绍的基本一样,不同之处在于给每个不同省份填充对应的颜色,请看整理好的代码:

Js代码 PHP+Mysql+jQuery实现中国地图区域数据统计 PHP+Mysql+jQuery实现中国地图区域数据统计PHP+Mysql+jQuery实现中国地图区域数据统计

  1. $(function(){    
  2.     $.get("json.php",function(json){//获取数据    
  3.     var data = string2Array(json);//转换数组    
  4.         
  5.     var flag;    
  6.     var arr = new Array();//定义新数组,对应等级    
  7.     for(var i=0;i
  8.         var d = data[i];    
  9.         if(d
  10.             flag = 0;    
  11.         }else if(d>=100 && d
  12.             flag = 1;    
  13.         }else if(d>=500 && d
  14.             flag = 2;    
  15.         }else if(d>=2000 && d
  16.             flag = 3;    
  17.         }else if(d>=5000 && d
  18.             flag = 4;    
  19.         }else{    
  20.             flag = 5;    
  21.         }    
  22.         arr.push(flag);    
  23.     }    
  24.     //定义颜色    
  25.     var colors = ["#d7eef8","#97d6f5","#3fbeef","#00a2e9","#0084be","#005c86"];    
  26.         
  27.     //调用绘制地图方法    
  28.     var R = Raphael("map", 600, 500);    
  29.     paintMap(R);    
  30.         
  31.     var textAttr = {    
  32.         "fill""#000",    
  33.         "font-size""12px",    
  34.         "cursor""pointer"    
  35.     };    
  36.                 
  37.     var i=0;    
  38.     for (var state in china) {    
  39.         china[state]['path'].color = Raphael.getColor(0.9);    
  40.         (function (st, state) {    
  41.                 
  42.             //获取当前图形的中心坐标    
  43.             var xx = st.getBBox().x + (st.getBBox().width / 2);    
  44.             var yy = st.getBBox().y + (st.getBBox().height / 2);    
  45.                 
  46.             //修改部分地图文字偏移坐标    
  47.             switch (china[state]['name']) {    
  48.                 case "江苏":    
  49.                     xx += 5;    
  50.                     yy -= 10;    
  51.                     break;    
  52.                 case "河北":    
  53.                     xx -= 10;    
  54.                     yy += 20;    
  55.                     break;    
  56.                 case "天津":    
  57.                     xx += 10;    
  58.                     yy += 10;    
  59.                     break;    
  60.                 case "上海":    
  61.                     xx += 10;    
  62.                     break;    
  63.                 case "广东":    
  64.                     yy -= 10;    
  65.                     break;    
  66.                 case "澳门":    
  67.                     yy += 10;    
  68.                     break;    
  69.                 case "香港":    
  70.                     xx += 20;    
  71.                     yy += 5;    
  72.                     break;    
  73.                 case "甘肃":    
  74.                     xx -= 40;    
  75.                     yy -= 30;    
  76.                     break;    
  77.                 case "陕西":    
  78.                     xx += 5;    
  79.                     yy += 10;    
  80.                     break;    
  81.                 case "内蒙古":    
  82.                     xx -= 15;    
  83.                     yy += 65;    
  84.                     break;    
  85.                 default:    
  86.             }    
  87.             //写入文字    
  88.             china[state]['text'] = R.text(xx, yy, china[state]['name']).attr(textAttr);    
  89.                 
  90.             var fillcolor = colors[arr[i]];//获取对应的颜色    
  91.                 
  92.             st.attr({fill:fillcolor});//填充背景色    
  93.                 
  94.             st[0].onmouseover = function () {    
  95.                 st.animate({fill: "#fdd", stroke: "#eee"}, 500);    
  96.                 china[state]['text'].toFront();    
  97.                 R.safari();    
  98.             };    
  99.             st[0].onmouseout = function () {    
  100.                 st.animate({fill: fillcolor, stroke: "#eee"}, 500);    
  101.                 china[state]['text'].toFront();    
  102.                 R.safari();    
  103.             };    
  104.                         
  105.          })(china[state]['path'], state);    
  106.          i++;    
  107.     }    
  108.     });    
  109. });   

 

上述代码中,使用var fillcolor = colors[arr[i]];获取对应等级的颜色值,然后通过st.attr({fill:fillcolor});将颜色填充到对应的省份区块中。此外string2Array()函数是将字符串转换为数组。

Js代码

  1. function string2Array(string) {     
  2.     eval("var result = " + decodeURI(string));     
  3.     return result;     
  4. }   

 

这样,我们可以看到一个不同省份不同背景色的中国地图,根据不同颜色可以区分省份之间的活跃用户数差异程度,达到预期目标。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Use ddrescue to recover data on Linux Use ddrescue to recover data on Linux Mar 20, 2024 pm 01:37 PM

DDREASE is a tool for recovering data from file or block devices such as hard drives, SSDs, RAM disks, CDs, DVDs and USB storage devices. It copies data from one block device to another, leaving corrupted data blocks behind and moving only good data blocks. ddreasue is a powerful recovery tool that is fully automated as it does not require any interference during recovery operations. Additionally, thanks to the ddasue map file, it can be stopped and resumed at any time. Other key features of DDREASE are as follows: It does not overwrite recovered data but fills the gaps in case of iterative recovery. However, it can be truncated if the tool is instructed to do so explicitly. Recover data from multiple files or blocks to a single

Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Apr 03, 2024 pm 12:04 PM

0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

How to implement dual WeChat login on Huawei mobile phones? How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Apr 01, 2024 pm 07:46 PM

The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream

The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks Apr 29, 2024 pm 06:55 PM

I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.

Slow Cellular Data Internet Speeds on iPhone: Fixes Slow Cellular Data Internet Speeds on iPhone: Fixes May 03, 2024 pm 09:01 PM

Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker

The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. May 07, 2024 pm 05:00 PM

Recently, the military circle has been overwhelmed by the news: US military fighter jets can now complete fully automatic air combat using AI. Yes, just recently, the US military’s AI fighter jet was made public for the first time and the mystery was unveiled. The full name of this fighter is the Variable Stability Simulator Test Aircraft (VISTA). It was personally flown by the Secretary of the US Air Force to simulate a one-on-one air battle. On May 2, U.S. Air Force Secretary Frank Kendall took off in an X-62AVISTA at Edwards Air Force Base. Note that during the one-hour flight, all flight actions were completed autonomously by AI! Kendall said - "For the past few decades, we have been thinking about the unlimited potential of autonomous air-to-air combat, but it has always seemed out of reach." However now,

The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training Mar 11, 2024 pm 12:10 PM

This week, FigureAI, a robotics company invested by OpenAI, Microsoft, Bezos, and Nvidia, announced that it has received nearly $700 million in financing and plans to develop a humanoid robot that can walk independently within the next year. And Tesla’s Optimus Prime has repeatedly received good news. No one doubts that this year will be the year when humanoid robots explode. SanctuaryAI, a Canadian-based robotics company, recently released a new humanoid robot, Phoenix. Officials claim that it can complete many tasks autonomously at the same speed as humans. Pheonix, the world's first robot that can autonomously complete tasks at human speeds, can gently grab, move and elegantly place each object to its left and right sides. It can autonomously identify objects

See all articles