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 按地图上显示的统计数据

最新文章

热门文章