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定制,开发样式,监听鼠标事件,实现带参数路由跳转等 ...
随机推荐
- 实例详解——编译器命令#pragma section作用于函数时作用域是否覆盖到其子函数
在之前的博客[链接脚本(Linker Script)应用实例(一)使用copy table将函数载入到RAM中运行]中,我们第一步使用#pragma section命令将PFlashProgram函数 ...
- 纯CSS与HTML实现垂直时间轴
原创YouTube HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CentOS 6 编译 TensorFlow for Java 以及 Maven Pom
我们的系统环境 CentOS 6.5, JDK 1.8 更新yum源 $ yum update 安装 Python 2.7 $ yum install python27 python27-numpy ...
- 洛谷 P2342 叠积木 题解
本蒟蒻又来发题解了 这题是不是有点像并查集,但是那个询问的个数是不是有点骚: 所以,普通的并查集是无法解决这个问题的,这个时候就需要用到带权并查集了: 每次跑的时候都记录下它的下面有几个点,然后询问的 ...
- 开发中遇到的一些bug及解决方案
一.在使用UIStackView时报“UIStackView before iOS 9.0”.
- tableview封装使用
下载地址 使用方法 1. #import "ZFTableView.h" 2.在需要使用的地方添加ZFTableView 如下 ZFTableView *ta ...
- java的传参究竟是按值传递的还是按引用传递的
这里来弄清楚Java的传参究竟是按值传递的还是按引用传递的. 形参和实参 传参的概念里,有形参和实参的区分.形参是定义方法名和方法体的时候使用的参数,目的是用来接收调用该方法的时候传入的参数:实参是调 ...
- JS-引用类型的参数传递
- Vue-router的实现原理
参考博客:https://www.jianshu.com/p/4295aec31302 参考博客:https://segmentfault.com/a/1190000015123061
- 2019百度阿里Java面试题(基础+框架+数据库+分布式+JVM+多线程)
前言 很多朋友对面试不够了解,不知道如何准备,对面试环节的设置以及目的不够了解,因此成功率不高.通常情况下校招生面试的成功率低于1%,而社招的面试成功率也低于5%,所以对于候选人一定要知道设立面试的初 ...