hightmaps 按地图上显示的统计数据
离extjs 至 easyui 到html5到hightchars 再到hightmaps。Exjts和easyui很相似，extjs是重量级的，easyui轻量级的。比extjs容易上手。照着demo改就能够开发了。easyui入门demo见：easyui-demo，或者到官网http://www.jeasyui.com/；会了easyui开发，上手html5界面开发也很的快。大多类似的。到html5-demo界面开发 下载demo 然后把demo放到自己的web项目中或者訪问http://www.rgraph.net/docs/line.html。进一步使用hightchar也很容易，下载demo体验一下hightchar很方便地样例，理解hightchar，官网http://www.highcharts.com/或见hightchars-demo
以下介绍hightmap开发中国地图分布量，效果截图。
前台代码
China-map.jsp
引入包。初始化组件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script src="js/highmaps.js"></script>
<script src="js/modules/exporting.js"></script>
<script src="js/china-data.js"></script> <title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#container {
height: 700px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
</style>
<script type="text/javascript">
$(function () {
var data = [
${data}
]; $('#container').highcharts('Map', {
title : {
text : 'xxx量统计'
},
subtitle : {
text : '地区分布'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/china'],
joinBy: 'hc-key',
name: 'xxx分布',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
}); </script>
</head> <body>
<div id="container"></div>
</body>
</html>
Action代码
package com.li72.action; import com.li72.dao.MapDao;
import com.opensymphony.xwork2.ActionSupport; /**
* @author 一个简单的前后台交换 地图展示
*
*/
public class MapAction extends ActionSupport{ private static final long serialVersionUID = -5452039838295753607L;
MapDao map= new MapDao();
private String data;
public String chinaMap(){
data = map.mkData();
return SUCCESS;
}
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
}
dao层，产生模拟数据。建议把地图做成通用的，仅仅要把数据源改变，就能够产生不同的按地区分布图。
package com.li72.dao; import java.util.HashMap;
import java.util.Map;
import java.util.Random; public class MapDao { /**
* @return 依照地图的设定，对这些省市进行设值
*/
public String mkData(){ StringBuffer sb = new StringBuffer("");
Map<String,String> myMap= new HashMap<String,String>(40);
myMap.put("吉林省","cn-jl");
myMap.put("天津市","cn-tj");
myMap.put("安徽省","cn-ah");
myMap.put("山东省","cn-sd");
myMap.put("山西省","cn-sx");
myMap.put("新疆维吾尔自治区","cn-xj");
myMap.put("河北省","cn-hb");
myMap.put("河南省","cn-he");
myMap.put("湖南省","cn-hn");
myMap.put("甘肃省","cn-gs");
myMap.put("福建省","cn-fj");
myMap.put("贵州省","cn-gz");
myMap.put("重庆市","cn-cq");
myMap.put("江苏省","cn-js");
myMap.put("湖北省","cn-hu");
myMap.put("内蒙古自治区","cn-nm");
myMap.put("广西壮族自治区","cn-gx");
myMap.put("黑龙江省","cn-hl");
myMap.put("云南省","cn-yn");
myMap.put("辽宁省","cn-ln");
myMap.put("香港特别行政区","cn-6668");
myMap.put("浙江省","cn-zj");
myMap.put("上海市","cn-sh");
myMap.put("北京市","cn-bj");
myMap.put("广东省","cn-gd");
myMap.put("澳门特别行政区","cn-3681");
myMap.put("西藏自治区","cn-xz");
myMap.put("陕西省","cn-sa");
myMap.put("四川省","cn-sc");
myMap.put("海南省","cn-ha");
myMap.put("宁夏回族自治区","cn-nx");
myMap.put("青海省","cn-qh");
myMap.put("江西省","cn-jx");
myMap.put("台湾省","tw-tw"); // {"hc-key": "cn-sh","value": 0},
Random random = new Random();
String value="";
for (Object o : myMap.keySet()) {
value= random.nextInt(100)+1+"" ;
sb.append("{'hc-key':'").
append(myMap.get(o)).
append("','value':").
append(value).
append("},").append("\n");
;
} return sb.deleteCharAt(sb.length()-1)+"";
}
Struts2配置
<package name="li72" extends="struts-default">
<action name="chinaMap" class="com.li72.action.MapAction" method="chinaMap">
<result name="success">/china-map.jsp</result>
</action>
</package>
下载地图开发实例，包含地图数据，包含其它的example
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlsaTcy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
版权声明：本文博主原创文章，博客，未经同意不得转载。
hightmaps 按地图上显示的统计数据的更多相关文章
- OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题
环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...
- 个人永久性免费-Excel催化剂功能第94波-地图数据挖宝之搜索地图上的各种兴趣点数据（商铺名、地名、公共设施等）
终于来到最激动人心的地图应用场景,将地图上的有价值的兴趣点数据一网打尽,全都收录在自己的数据源中,这个价值有多大,想想都兴奋,无数的商业场景可供挖掘,假如你还无动于衷,那要好好反思下自己做的数据分析的 ...
- html5定位并在百度地图上显示
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...
- Pandas日期数据处理：如何按日期筛选、显示及统计数据
前言 pandas有着强大的日期数据处理功能,本期我们来了解下pandas处理日期数据的一些基本功能,主要包括以下三个方面: 按日期筛选数据 按日期显示数据 按日期统计数据 运行环境为 windows ...
- [Xcode 实际操作]四、常用控件-(17)为MKMapView地图上显示提示框
目录:[Swift]Xcode实际操作 本文将演示当点击地图上的标注圆点时,弹出信息窗口. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...
- html5定位获取当前位置并在百度地图上显示
用html5的地理定位功能通过手机定位获取当前位置并在地图上居中显示出来,下面是百度地图API的使用过程,有需要的朋友可以参考下 在开发移动端 web 或者webapp时,使用百度地图 API 的过程 ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
- 地图上显示X,Y 坐标代码
事件数据 所有的鼠标事件都使用MouseButtonEventArgs和MouseEventArgs作为事件数据,通过这两个参数可以获取相关事件数据,使用GetPosition方法或者Source.H ...
- 根据百度地图API得到坐标和地址并在地图上显示
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout ...
随机推荐
- Linux：闪光的宝石，智慧 (在）
Linux:闪光的宝石,智慧的结晶(上) 老实说,这十几天以来.因为我违反了"家规",又被断网处罚(拔掉网线).没收手机与老年证(不许出家门). 因此.我平日里仅仅能面对一篇文章& ...
- 解决apache+tomcatserver环境中文乱码的问题
在使用apache做转发服务器时,碰到了中文乱码的问题. 说说解决思路: 1.通常乱码是由于编码不统一造成的.所以要先推断是不是由于编码问题造成的,假设是的话,那统一编码就能够去解决. 2.tomca ...
- SP2010 3D标签云Web部分--很酷的效果，强烈推荐！！
SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事 基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...
- R三星463无线网卡驱动，声音驱动程序，FN快捷键驱动，Easy_Display_Manager
http://download.csdn.net/detail/u012120447/7568369 当我们重装系统,该卡不能使用,您需要使用快捷键无法使用时, Easy_Display_Manage ...
- WPF技术触屏上的应用系列（一）: 3D 图片（照片）墙、柱面墙（凹面墙或者叫远景墙、凸面墙或者叫近景墙）实现
原文:WPF技术触屏上的应用系列(一): 3D 图片(照片)墙.柱面墙(凹面墙或者叫远景墙.凸面墙或者叫近景墙)实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- java编程规范之java注释规范
代码要是没有注释,对读者来说就是一堆乱七八糟的字母,为了提高代码的可读性和可维护性,必须对代码进行必要的注释,这里小编整理了一下java注释规范. (一)技巧 1:注释当前行快捷方式:ctrl+/ 2 ...
- 技术七Gitservergitolite要构建和操作方便
最近,人懒,为了让自己的变化,所以,我决定花时间学习一些新的技术,.对于这些新技术,现在的需求不是很高.只需要在它的入口. 由于本人仅仅是花三四天整出来的东西,所以不洗勿喷,另外难免会有错误,如有还请 ...
- jQuery -> bind / live / delegate 终结者 - on
最近的一项研究jQuery.利用获得的最新版本1.11.1. 据该书打下面的代码示例,,反正也发现跑不起来. html <div class="container"> ...
- javascript动画中的“帧”
在写游戏的时候,动画移动的速度需要保持一致,为了在各个软硬件环境中速度的一致,需要考虑帧频的不同. 计算时间系数: 时间系数 = 目标FPS / 实际FPS 计算实际FPS actualFPS = 1 ...
- NetBeans工具学习之道：NetBeans IDE Java 高速新手教程
欢迎使用 NetBeans IDE! 本教程通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流.学习完本教程 ...