PHP+jQuery中国地图热点数据统计展示实例
一款PHP+jQuery实现的中国地图热点数据统计展示实例,当鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息。
首先在页面中加一个div#tip,用来展示地图信息的提示框和#map用来生成地图。
- <div id="map"></div>
- <div id="tip"></div>
接着我们引入jQuery库、raphael.js及chinamapPath.js(中国地图数据)
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="raphael.js"></script>
- <script type="text/javascript" src="chinamapPath.js"></script>
通过调用raphael绘制出中国地图,然后载入统计数据,由于地图区块小,我们不在地图载入的时候就将数据显示在地图区块上了,我们通过鼠标交互实现将数据信息更好的展示给用户。当鼠标滑向省份区块时,通过e.clientX和e.clientY定位鼠标坐标,然后通过jquery的css()方法定位提示框div#tip,并且将对应省份的的名称和活跃用户数加到提示框里并展现出来,代码如下:
- $(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 i = 0;
- for (var state in china) {
- china[state]['path'].color = Raphael.getColor(0.9); (function(st, state) {
- var prodata = data[i];
- var fillcolor = colors[arr[i]];
- st.attr({
- fill: fillcolor
- }); //填充背景色
- xOffset = 70;
- yOffset = 180;
- st.hover(function(e) {
- st.animate({
- fill: "#fdd",
- stroke: "#eee"
- },
- 500);
- R.safari();
- $("#tip").css({
- "top": (e.clientY - xOffset) + "px",
- "left": (e.clientX - yOffset) + "px"
- }).fadeIn("fast").html("<h4>" + china[state]['name'] + "</h4><p>活跃用户数:" + prodata + "</p>");
- },
- function() {
- st.animate({
- fill: fillcolor,
- stroke: "#eee"
- },
- 500);
- R.safari();
- $("#tip").hide();
- });
- st.mousemove(function(e) {
- $("#tip").css({
- "top": (e.clientY - xOffset) + "px",
- "left": (e.clientX - yOffset) + "px"
- });
- R.safari();
- });
- })(china[state]['path'], state);
- i++;
- }
- });
- });
- function string2Array(string) {
- eval("var result = " + decodeURI(string));
- return result;
- }
本文转自:https://www.sucaihuo.com/php/147.html 转载请注明出处!
PHP+jQuery中国地图热点数据统计展示实例的更多相关文章
- PHP+Mysql+jQuery实现地图区域数据统计-展示数据
我们要在地图上有限的区块内展示更多的信息,更好的办法是通过地图交互来实现.本文将给大家讲解通过鼠标滑动到地图指定省份区域,在弹出的提示框中显示对应省份的数据信息.适用于数据统计和地图区块展示等场景. ...
- jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: <div ...
- PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...
- 用python实现简单EXCEL数据统计的实例
用python实现简单EXCEL数据统计的实例 下面小编就为大家带来一篇用python实现简单EXCEL数据统计的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 任 ...
- jquery中国地图插件
插件下载地址: http://www.17sucai.com/preview/1266961/2018-09-18/map/js/jsMap-1.1.0.min.js jsMap 项目介绍 这是一个功 ...
- PHP+MySQL实现对一段时间内每天数据统计优化操作实例
http://www.jb51.net/article/136685.htm 这篇文章主要介绍了PHP+MySQL实现对一段时间内每天数据统计优化操作,结合具体实例形式分析了php针对mysql查询统 ...
- 7款个性化jQuery/HTML5地图插件
现在我们经常会用到一些地图应用,无论是在网页上还是手机App中,地图貌似是一个不可或缺的应用.本文将带领大家一起来看看一些基于jQuery和HTML5的个性化地图插件,有几款地图比较实用,有些则是具有 ...
- R绘制中国地图,并展示流行病学数据
流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...
- 基于Echarts的中国地图数据展示
发布时间:2018-10-31 技术:javascript+html5+canvas 概述 基于echarts的大数据中国地图展示,结合API定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
随机推荐
- 基于H.ui.Admin UI模板的网站管理后台
最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了 ...
- C#DateTime格式转换全介绍
DateTime与字符串转换: DateTime()与转换为字符串主要依靠DateTime().ToString(string format) 函数,以我的理解,参数format大体分为单个字母和多个 ...
- KETTLE教程实战
kettle初探 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定.Kettle 中文名称叫水壶,该项目的主程 ...
- iPhone唯一标识符
为了区分iPhone设备,就要用到iPhone的唯一标识符唯一标识符包括:UDID(唯一设备标识符).identifierForVendor(供应商标识符).advertisingIdentifier ...
- mininet(三)简单的NAT实验
mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 本次实验拓扑图如下: 假设 Openvswitch switch1是一个带有NAT功能的路由 ...
- [TimLinux] JavaScript 获取设置在CSS类中的属性值
1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...
- 【解决】OCI runtime exec failed......executable file not found in $PATH": unknown
[问题]使用docker exec + sh进入容器时报错 [root@localhost home]# docker exec -it container-test bash OCI runtime ...
- Balls in the Boxes
Description Mr. Mindless has many balls and many boxes,he wants to put all the balls into some of th ...
- CSU oj 2092-Space Golf
You surely have never heard of this new planet surface exploration scheme, as it is being carried ou ...
- Python如何实现微信群万人同步直播?
很多人传言微信网页版(https://wx.qq.com/)接口已经被封了,所以所有的微信都不能登录网页版,这是错误的. 2019年7月微信对网页版微信进行了动态安全策略调整,导致一大批微信号不能登录 ...