? ? 離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)+"";}<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
地圖開發代碼
版權聲明：本文博主原創文章，博客，未經同意不得轉載。
![BZOJ 1270: [BeijingWc2008]雷濤的小貓( dp )](http://pic.xiahunao.cn/BZOJ 1270: [BeijingWc2008]雷濤的小貓( dp ))
 函數用于統計數組中所有值出現的次數。)
