zoukankan      html  css  js  c++  java

  • 【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 
  • 相关阅读:
    Python入门
    实现QQ、微信、新浪微博和百度第三方登录(Android Studio)
    Android 微信第三方登录
    Javascript获取随机数
    JavaScript for循环 闭包 【转】
    JavaScript中数组的增删改查
    【网络基础系列一】客户/服务器模型
    jQuery选择器
    局部代码块
    接口中定义变量
  • 原文地址：https://www.cnblogs.com/ssslinppp/p/4522276.html
Copyright © 2011-2022 走看看