ssslinppp

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
【FusionCharts学习-3】显示中国地图
概述
使用FusionCharts显示中国地图


资源获取
地图下载地址：http://www.fusioncharts.com/download/maps/definition/  
将下载的地图拷贝到maps文件夹下，因为只显示中国地图，所以这里仅拷贝了中国地图的js文件。
http://www.fusioncharts.com/charts/fusionmaps/?map=us-employment-distribution-map 


项目结构


map.jsp
  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <%
  3. 	String path = request.getContextPath();
  4. 	String basePath = request.getScheme() + "://"
  5. 			+ request.getServerName() + ":" + request.getServerPort()
  6. 			+ path + "/";
  7. 	response.setHeader("Pragma", "no-cache");
  8. 	response.setHeader("Cache-Control", "no-cache");
  9. 	response.setDateHeader("Expires", 0);
  10. %>
  11. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  12. <html>
  13. <head>
  14. <title>My first FusionCharts</title>
  15. <script type="text/javascript"
  16. 	src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
  17. <script type="text/javascript"
  18. 	src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>
  19. <script type="text/javascript"
  20. 	src="<%=basePath%>fusioncharts/fusioncharts.maps.js"></script>	
  21. <script type="text/javascript">
  22. 	FusionCharts.ready(function() {
  23. 		var revenueChart = new FusionCharts({
  24. 			"type" : "maps/china",
  25. 			"renderAt" : "chartContainer",
  26. 			"width" : "800",
  27. 			"height" : "600",
  28. 			"dataFormat" : "json",
  29. 			"dataSource" : {
  30. 			    "map": {
  31. 			        "animation": "0",
  32. 			        "showbevel": "0",
  33. 			        "usehovercolor": "1",
  34. 			        "canvasbordercolor": "FFFFFF",
  35. 			        "bordercolor": "FFFFFF",
  36. 			        "showlegend": "1",
  37. 			        "showshadow": "0",
  38. 			        "legendposition": "BOTTOM",
  39. 			        "legendborderalpha": "0",
  40. 			        "legendbordercolor": "ffffff",
  41. 			        "legendallowdrag": "0",
  42. 			        "legendshadow": "0",
  43. 			        "caption": "Website Visits for the month of Jan 2014",
  44. 			        "connectorcolor": "000000",
  45. 			        "fillalpha": "80",
  46. 			        "hovercolor": "CCCCCC",
  47. 			        "showborder": 0
  48. 			    },
  49. 			    "colorrange": {
  50. 			        "minvalue": "0",
  51. 			        "startlabel": "Low",
  52. 			        "endlabel": "High",
  53. 			        "code": "e44a00",
  54. 			        "gradient": "1",
  55. 			        "color": [
  56. 			            {
  57. 			                "maxvalue": "30000",
  58. 			                "displayvalue": "Average",
  59. 			                "code": "f8bd19"
  60. 			            },
  61. 			            {
  62. 			                "maxvalue": "100000",
  63. 			                "code": "6baa01"
  64. 			            }
  65. 			        ]
  66. 			    },
  67. 			    "data": [
  68. 			        {
  69. 			            "id": "10",
  70. 			            "value": "4364"
  71. 			        },
  72. 			        {
  73. 			            "id": "11",
  74. 			            "value": "4641"
  75. 			        },
  76. 			        {
  77. 			            "id": "12",
  78. 			            "value": "473"
  79. 			        },
  80. 			        {
  81. 			            "id": "13",
  82. 			            "value": "64963"
  83. 			        },
  84. 			        {
  85. 			            "id": "15",
  86. 			            "value": "54516"
  87. 			        },
  88. 			        {
  89. 			            "id": "16",
  90. 			            "value": "54687"
  91. 			        },
  92. 			        {
  93. 			            "id": "18",
  94. 			            "value": "33112"
  95. 			        },
  96. 			        {
  97. 			            "id": "19",
  98. 			            "value": "32938"
  99. 			        },
  100. 			        {
  101. 			            "id": "20",
  102. 			            "value": "40680"
  103. 			        },
  104. 			        {
  105. 			            "id": "21",
  106. 			            "value": "34474"
  107. 			        },
  108. 			        {
  109. 			            "id": "24",
  110. 			            "value": "33184"
  111. 			        },
  112. 			        {
  113. 			            "id": "25",
  114. 			            "value": "34178"
  115. 			        },
  116. 			        {
  117. 			            "id": "26",
  118. 			            "value": "43872"
  119. 			        },
  120. 			        {
  121. 			            "id": "29",
  122. 			            "value": "39075"
  123. 			        },
  124. 			        {
  125. 			            "id": "30",
  126. 			            "value": "45282"
  127. 			        },
  128. 			        {
  129. 			            "id": "31",
  130. 			            "value": "61138"
  131. 			        },
  132. 			        {
  133. 			            "id": "32",
  134. 			            "value": "35846"
  135. 			        },
  136. 			        {
  137. 			            "id": "36",
  138. 			            "value": "35494"
  139. 			        },
  140. 			        {
  141. 			            "id": "06",
  142. 			            "value": "73357"
  143. 			        },
  144. 			        {
  145. 			            "id": "08",
  146. 			            "value": "46019"
  147. 			        },
  148. 			        {
  149. 			            "id": "05",
  150. 			            "value": "58670"
  151. 			        },
  152. 			        {
  153. 			            "id": "09",
  154. 			            "value": "49797"
  155. 			        },
  156. 			        {
  157. 			            "id": "01",
  158. 			            "value": "73343"
  159. 			        },
  160. 			        {
  161. 			            "id": "04",
  162. 			            "value": "88940"
  163. 			        },
  164. 			        {
  165. 			            "id": "02",
  166. 			            "value": "89712"
  167. 			        },
  168. 			        {
  169. 			            "id": "07",
  170. 			            "value": "93772"
  171. 			        },
  172. 			        {
  173. 			            "id": "03",
  174. 			            "value": "93772"
  175. 			        }
  176. 			    ]
  177. 			}
  178. 		});
  179. 		revenueChart.render();
  180. 	})
  181. </script>
  182. </head>
  183. <body>
  184. 	<div id="chartContainer">FusionMaps XT will load s map here!</div>
  185. </body>
  186. </html>

效果图
tomcat运行程序，浏览器输入：http://localhost:8080/FusionChartsTest/map.jsp 















posted on 2015-05-22 14:27  ssslinppp  阅读(2817)  评论(0)  编辑  收藏  举报