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 ...

随机推荐

采用jqueryUI创建日期选择器
该公司的项目使用的插件时间选择,百度很长一段时间.没有找到合适的,而且,他们在看了jqueryUI.自己变成一个更好的集成日期选择器.为了以后遇到相同的问题是可以解决. 以下就贴出部分使用的代码,比較 ...
js“分享到”侧边框伸缩实现
思路: 1,临界值是 -150 和 0 如果大于临界值,就要隐藏 2,隐藏:速度为负显示:速度为正 3,如果与临界值相等,就清空定时器否则,就运动 ------------------------ ...
代码的未来读书笔记<二>
代码的未来读书笔记<二> 3.1语言的设计对Ruby JavaScript Java Go 从服务端client以及静态动态这2个角度进行了对照. 这四种语言因为不同的设计方针,产生了不 ...
设置函数环境——setfenv（转）
当我们在全局环境中定义变量时经常会有命名冲突,尤其是在使用一些库的时候,变量声明可能会发生覆盖,这时候就需要一个非全局的环境来解决这问题.setfenv函数可以满足我们的需求. setfenv(f, ...
MonkenRunner通过HierarchyViewer定位控制的方法和建议(Appium/UIAutomator/Robotium侣)
1. 背景正在使用MonkeyRunner当我们经常使用Chimchat下面HierarchyViewer模块获得目标控制的一些信息,以协助我们测试.但在MonkeyRunner官方的说法是没有看到 ...
poj2112 Optimal Milking --- 最大流量，二分法
nx一个挤奶器,ny奶牛,每个挤奶罐为最m奶牛使用. 现在给nx+ny在矩阵之间的距离.要求使所有奶牛挤奶到挤奶正在旅程,最小的个体奶牛步行距离的最大值. 始感觉这个类似二分图匹配,不同之处在于挤奶器 ...
【iOS】Swift扩展extension和协议protocol
加上几个关节前Playground摘要码进入github在,凝视写了非常多,主要是为了方便自己的未来可以Fanfankan. Swift语法的主要部分几乎相同的. 当然也有通用的.运算符重载.ARC. ...
unity3d 学习笔记（两）
AudioClip 使用声音资源 unity3d资源可以被设置为声3d声音或2d声音.3d间的影响,越近声音越大 component: Audio source: 声音的发生物体 Audio list ...
VS公布错到文件失败复制到
他自己和构建网站 ASP.MVC4 最近更改写功能自此从未公布已经报道错 15 到文件失败 easyui\themes\gray\images\Thumbs.db 拷贝到 obj\Releas ...
springmvc 接收对象滴灌摘要
js 对象该阵列看起来像我明白http://blog.csdn.net/baicp3/article/details/12752255本文我们指示样品棒 data3一个js对象.遗嘱java当代 ...

hightmaps 按地图上显示的统计数据

hightmaps 按地图上显示的统计数据的更多相关文章

随机推荐

热门专题