hightmaps 按地图显示统计量

    从extjs 到 easyui html5hightchars 再到hightmaps。Exjtseasyui很相似,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开发中国地图分布量,效果截图。

hightmaps 按地图显示统计量_第1张图片


前台代码

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+"/";
%>



  
    
    
    




    
    My JSP 'index.jsp' starting page
	
	
	    
	
	
	
	
  
  
  
  

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 myMap= new HashMap(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配置


/china-map.jsp

 下载地图开发实例,包括地图数据,包括其他的example 
  

hightmaps 按地图显示统计量_第2张图片

地图开发代码

你可能感兴趣的:(Html5,web前端,学习笔记)