码迷,mamicode.com
首页 > 其他好文 > 详细

【FusionCharts学习-3】显示中国地图

时间:2015-05-22 15:03:44      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

概述

使用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 
技术分享














【FusionCharts学习-3】显示中国地图

标签:

原文地址:http://www.cnblogs.com/ssslinppp/p/4522276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!