php实现地图区域数据统计-ajax载入数据
效果如下图
HTML
和本站上篇文章使用raphael.js绘制中国地图一样,首先在head部分载入raphael.js库文件和chinamapPath.js路径信息文件。
代码如下 | 复制代码 |
<script type="text/javascript" src="jquery.js"></script> 然后在body中需要放置地图的位置放置div#map。 <div id="map"></div> |
PHP
我们准备一张mysql表名为mapdata,这张表存储的是产品在各个省份的活跃用户数据。我们使用PHP读取mysql表中的数据,并将读取的数据以json格式输出,并将PHP文件命名为json.php。
代码如下 | 复制代码 |
$host="localhost";//主机 |
值得注意的是,我们要把mapdata表中各省份的排序与chinamapPath.js文件中的各省份顺序一致,这样才能保证读取的数据能和地图中的省份对应上。
jQuery
首先我们使用jquery的get()方法获取json数据。
代码如下 | 复制代码 |
$(function(){ |
获取到json数据后,我们先要将json数据转换为数组,然后我们遍历整个数组,根据json数据中各省份活跃用户数的多少,我们作一个等级区分,这里我将等级分为0-5六个等级,活跃用户数越大背景颜色越深,这样在地图上显示就会一目了然的看出不同省份的数据等级程度。绘制地图的时候和本站上篇文章使用raphael.js绘制中国地图介绍的基本一样,不同之处在于给每个不同省份填充对应的颜色,请看整理好的代码:
代码如下 | 复制代码 |
$(function(){ $.get("json.php",function(json){//获取数据 var data = string2Array(json);//转换数组 var flag; var arr = new Array();//定义新数组,对应等级 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"]; //调用绘制地图方法 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) { //获取当前图形的中心坐标 var xx = st.getBBox().x + (st.getBBox().width / 2); var yy = st.getBBox().y + (st.getBBox().height / 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'] = R.text(xx, yy, china[state]['name']).attr(textAttr); var fillcolor = colors[arr[i]];//获取对应的颜色 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]];获取对应等级的颜色值,然后通过st.attr({fill:fillcolor});将颜色填充到对应的省份区块中。此外string2Array()函数是将字符串转换为数组。
代码如下 | 复制代码 |
function string2Array(string) { |
这样,我们可以看到一个不同省份不同背景色的中国地图,根据不同颜色可以区分省份之间的活跃用户数差异程度,达到预期目标。
实例下载地址:http://file.111cn.net/upload/2013/12/chinamap-data.zip
QR码详细原理可以参考QR维基百科,中文版介绍比较少,英文版介绍很全面,推荐看英文版的。
Description
PHP QR Code is open source (LGPL) library for generating QR Code, 2-dimensional barcode. Based on libqrencode C library, provides API for creating QR Code barcode images (PNG, JPEG thanks to GD2). Implemented purely in PHP.
Features
•Supports QR Code versions (size) 1-40
•Numeric, Alphanumeric, 8-bit and Kanji encoding.
•Implemented purely in PHP, no external dependencies except GD2
•Exports to PNG, JPEG images, also exports as bit-table
•TCPDF 2-D barcode API integration
•Easy to configure
•Data cache for calculation speed-up
•Debug data dump, error logging, time benchmarking
•Provided merge tool helps deploy library as a one file
•new! API documentation
•new! Over 30 detailed examples
•100% Open Source, LGPL Licensed
Demo
项目地址:http://sourceforge.net/projects/phpqrcode/
Generate fixed size images
* phpqrcode本身未提供固定大小二维码的设置,请参考 http://sourceforge.net/p/phpqrcode/discussion/1111884/thread/f739531a/
代码如下 | 复制代码 |
--- original/phpqrcode/qrimage.php 2010-08-18 07:06:24.000000000 -0700 用法,设置生成的二维码宽高为 500px define('IMAGE_WIDTH', 500); |
流量统计工具,诸如cnzz,百度统计,51啦,都是非常不错的,功能也很强大。闲来没事,自己写了一个简单的流量统计工具,不过只能统计访问时间,访问者ip,访问来路,受访页面,来自seo/seo.html" target="_blank">搜索引擎和搜索关键词。对比专业的流量统计工作来说肯定是微不足道的,但是说名了一点,其实大多数统计到的数据都没有我们想象那么难,有时候只需一个系统变量或者提取url中的一些信息就可以得出相应的统计信息。
(数据表结构和统计到的部分数据信息)
程序部分:
代码如下 | 复制代码 |
//访问量 |
代码如下 | 复制代码 |
<?php /** * byte数组与字符串转化类 */ class Bytes { /** * 转换一个String字符串为byte数组 * @param $str 需要转换的字符串 * @param $bytes 目标byte数组 * @author Zikie */ public static function getBytes($string) { $bytes = array(); for($i = 0; $i < strlen($string); $i++){ $bytes[] = ord($string[$i]); } return $bytes; } /** * 将字节数组转化为String类型的数据 * @param $bytes 字节数组 * @param $str 目标字符串 * @return 一个String类型的数据 */ public static function toStr($bytes) { $str = ''; foreach($bytes as $ch) { $str .= chr($ch); } return $str; } /** * 转换一个int为byte数组 * @param $byt 目标byte数组 * @param $val 需要转换的字符串 * */ public static function integerToBytes($val) { $byt = array(); $byt[0] = ($val & 0xff); $byt[1] = ($val >> 8 & 0xff); $byt[2] = ($val >> 16 & 0xff); $byt[3] = ($val >> 24 & 0xff); return $byt; } /** * 从字节数组中指定的位置读取一个Integer类型的数据 * @param $bytes 字节数组 * @param $position 指定的开始位置 * @return 一个Integer类型的数据 */ public static function bytesToInteger($bytes, $position) { $val = 0; $val = $bytes[$position + 3] & 0xff; $val <<= 8; $val |= $bytes[$position + 2] & 0xff; $val <<= 8; $val |= $bytes[$position + 1] & 0xff; $val <<= 8; $val |= $bytes[$position] & 0xff; return $val; } /** * 转换一个shor字符串为byte数组 * @param $byt 目标byte数组 * @param $val 需要转换的字符串 * */ public static function shortToBytes($val) { $byt = array(); $byt[0] = ($val & 0xff); $byt[1] = ($val >> 8 & 0xff); return $byt; } /** * 从字节数组中指定的位置读取一个Short类型的数据。 * @param $bytes 字节数组 * @param $position 指定的开始位置 * @return 一个Short类型的数据 */ public static function bytesToShort($bytes, $position) { $val = 0; $val = $bytes[$position + 1] & 0xFF; $val = $val << 8; $val |= $bytes[$position] & 0xFF; return $val; } } ?> |
代码如下 | 复制代码 |
<?php
|
相关文章
- php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧,希望文章对各位有帮助。 为了更好的了解redis协议,我们用php来实现...2016-11-25
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
jQuery+slidereveal实现的面板滑动侧边展出效果
我们借助一款jQuery插件:slidereveal.js,可以使用它控制面板左右侧滑出与隐藏等效果,项目地址:https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15- 翻板抽奖的实现流程:前端页面提供6个方块,用数字1-6依次表示6个不同的方块,当抽奖者点击6个方块中的某一块时,方块翻转到背面,显示抽奖中奖信息。看似简单的一个操作过程,却包含着WEB技术的很多知识面,所以本文的读者应该熟...2015-10-21
SQLMAP结合Meterpreter实现注入渗透返回shell
sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等,下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25- 复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04
- js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG)。 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07
- 这篇文章主要介绍了C#统计字符串中数字个数的方法,涉及C#遍历字符串并判断数字的技巧,需要的朋友可以参考下...2020-06-25
- 本文我们需要解决的问题是如何实现Http请求来实现通信,解决Android 2.3 版本以后无法使用Http请求问题,下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20
- 复制代码 代码如下:call PROCEDURE_split('分享,代码,片段',',');select * from splittable;复制代码 代码如下:drop PROCEDURE if exists procedure_split;CREATE PROCEDURE `procedure_split`( inputstring varc...2014-05-31
- 这篇文章主要介绍了Linux下统计当前文件夹下的文件个数、目录个数,本文使用ls命令配合管理、grep命令实现统计需求,需要的朋友可以参考下...2020-07-11
- 基本思想就是:在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息,代码有点长,但很多都是类似的,例如JS中省、市、区获取方法类似,PHP中通过参数不同执行不同的select语句。index.html代码:复制...2014-05-31
- 下面代码用JS实现了程序的暂停与继续 复制代码 代码如下: <script type="text/javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实...2013-10-13
- 这篇文章主要介绍了解决Keras 中加入lambda层无法正常载入模型问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-17
- 这篇文章主要介绍了Postgresql 动态统计某一列的某一值出现的次数实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-26
- 这篇文章主要介绍了Servlet实现统计页面访问次数功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-08
- 我们一起来看一篇关于PHPCMS实现自动推送URL到百度站长平台,希望此教程能够帮助到各位朋友。 百度站长平台开放url推送接口,可以使用调用接口的形式主动及时推送u...2016-11-25
- cover flow效果就一个超级漂亮的图片切换效果了,下面我们来看看CSS+JS实现苹果cover flow效果示例吧,具体的操作步骤细节如下文介绍。 废话不多说, 直接上最终效果...2016-10-02
- 文章介绍了利用了css hack来实现兼容ie和firefox 的div透明效果,有需要的朋友可以参考一下,好了费话不说多了。 为了实现一些特殊效果,需要将页面元素变透明,本文介...2017-07-06