离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+"/";
%>
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)+"";
}
/china-map.jsp
下载地图开发实例，包含地图数据，包含其它的example
地图开发代码
版权声明：本文博主原创文章，博客，未经同意不得转载。