【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

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	response.setHeader("Pragma", "no-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first FusionCharts</title>
<script type="text/javascript"
	src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
<script type="text/javascript"
	src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript"
	src="<%=basePath%>fusioncharts/fusioncharts.maps.js"></script>	
<script type="text/javascript">
	FusionCharts.ready(function() {
		var revenueChart = new FusionCharts({
			"type" : "maps/china",
			"renderAt" : "chartContainer",
			"width" : "800",
			"height" : "600",
			"dataFormat" : "json",
			"dataSource" : {
			    "map": {
			        "animation": "0",
			        "showbevel": "0",
			        "usehovercolor": "1",
			        "canvasbordercolor": "FFFFFF",
			        "bordercolor": "FFFFFF",
			        "showlegend": "1",
			        "showshadow": "0",
			        "legendposition": "BOTTOM",
			        "legendborderalpha": "0",
			        "legendbordercolor": "ffffff",
			        "legendallowdrag": "0",
			        "legendshadow": "0",
			        "caption": "Website Visits for the month of Jan 2014",
			        "connectorcolor": "000000",
			        "fillalpha": "80",
			        "hovercolor": "CCCCCC",
			        "showborder": 0
			    },
			    "colorrange": {
			        "minvalue": "0",
			        "startlabel": "Low",
			        "endlabel": "High",
			        "code": "e44a00",
			        "gradient": "1",
			        "color": [
			            {
			                "maxvalue": "30000",
			                "displayvalue": "Average",
			                "code": "f8bd19"
			            },
			            {
			                "maxvalue": "100000",
			                "code": "6baa01"
			            }
			        ]
			    },
			    "data": [
			        {
			            "id": "10",
			            "value": "4364"
			        },
			        {
			            "id": "11",
			            "value": "4641"
			        },
			        {
			            "id": "12",
			            "value": "473"
			        },
			        {
			            "id": "13",
			            "value": "64963"
			        },
			        {
			            "id": "15",
			            "value": "54516"
			        },
			        {
			            "id": "16",
			            "value": "54687"
			        },
			        {
			            "id": "18",
			            "value": "33112"
			        },
			        {
			            "id": "19",
			            "value": "32938"
			        },
			        {
			            "id": "20",
			            "value": "40680"
			        },
			        {
			            "id": "21",
			            "value": "34474"
			        },
			        {
			            "id": "24",
			            "value": "33184"
			        },
			        {
			            "id": "25",
			            "value": "34178"
			        },
			        {
			            "id": "26",
			            "value": "43872"
			        },
			        {
			            "id": "29",
			            "value": "39075"
			        },
			        {
			            "id": "30",
			            "value": "45282"
			        },
			        {
			            "id": "31",
			            "value": "61138"
			        },
			        {
			            "id": "32",
			            "value": "35846"
			        },
			        {
			            "id": "36",
			            "value": "35494"
			        },
			        {
			            "id": "06",
			            "value": "73357"
			        },
			        {
			            "id": "08",
			            "value": "46019"
			        },
			        {
			            "id": "05",
			            "value": "58670"
			        },
			        {
			            "id": "09",
			            "value": "49797"
			        },
			        {
			            "id": "01",
			            "value": "73343"
			        },
			        {
			            "id": "04",
			            "value": "88940"
			        },
			        {
			            "id": "02",
			            "value": "89712"
			        },
			        {
			            "id": "07",
			            "value": "93772"
			        },
			        {
			            "id": "03",
			            "value": "93772"
			        }
			    ]
			}
		});
		revenueChart.render();
	})
</script>
</head>
<body>
	<div id="chartContainer">FusionMaps XT will load s map here!</div>
</body>
</html>

效果图

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

来自为知笔记(Wiz)

【FusionCharts学习-3】显示中国地图的更多相关文章

百度Echarts中国地图经纬度
百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...
ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图
3D地图又叫场景. 由上一篇可知, require入口函数的第一个参数是字符串数组 ["esri/Map", "esri/views/MapView", &qu ...
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻
随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够 ...
Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
如何使用highmaps制作中国地图
如何使用highmaps制作中国地图文章目录 Highmaps 所需文件地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
ehcharts中国地图四级级下钻
echarts 官网关于中国地图,只有全国-省:省-市,没有中国-省-市-县四级下钻相关文献,echarts地图最重要一点是模块化相对于其他各个图形,一下为三级下钻部分代码包括各级别交互,望指点: 中 ...
Android开发百度地图（一）--显示基本地图
最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...
silverlight调用bing地图和显示中文地图
bing地图sdk: https://msdn.microsoft.com/en-us/library/ff428643.aspx 引用dll:https://www.microsoft.com/en ...
Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...

随机推荐

保存 Mybatis打印的SQL日志到数据库
之前做项目,一般会有一张,用户操作记录的数据表,里面主要包括一些,用户请求的URL和请求参数,用以记录用户做过哪些事情.并没有以文件的形式来做记录,当然只适合于一些用户量特别少的系统. 而Mybati ...
DevExpress WPF入门指南：加载动画的应用
LoadingDecorator是一个容器控件用于显示 long-loading 的内容.内容还没加载完成的时候会显示一个加载指示器,加载完成后指示器消失,如下图所示: 开启LoadingDecora ...
CUDA ---- Memory Access
Memory Access Patterns 大部分device一开始从global Memory获取数据,而且,大部分GPU应用表现会被带宽限制.因此最大化应用对global Memory带宽的使用 ...
float、clear、overflow
浮动: float: none|left|right 作用使得标签失去块级标签的独占一行效果,向某个方向靠拢标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况 ...
java中的块
之前没听过这个概念块是java类中不太常见的一个元素.声明方式与方法体类似,分为static块和实例块两种. 实例块: {块体} 实例块不能直接调用,每一次调用构造方法创建对象的时候,都会在调用构造 ...
谷歌Gmail诞生记：十年回首
美国<时代>周刊网络版今天刊登题为<Gmail诞生记:10年前鲜为人知的故事>(How Gmail Happened: The Inside Story of Its Laun ...
Android RIL的java框架
Android RIL的Java部分也被分为了两个模块,RIL模块与Phone模块.其中RIL模块负责进行请求以及相应的处理,它将直接与RIL的原声代码进行通信.而Phone模块则向应用程序开发者提供 ...
windows server 账号克隆
在dos命令行下隐藏用户的方法: net user 账户密码 /add 如果在账号后加 $ 符号这个账户在cmd命令行下是无法看见的首先我们设置注册表权限 cmd = > regedt ...
OC基础:getter和setter,@public @protected @private 分类： ios学习 OC 2015-06-15 19:23 22人阅读评论(0) 收藏
@public 1.公开的,公共的,可以在类的内部和外部访问. 2.类的内部:实例变量名 3.类的外部:对象->实例变量名 @protected 1.受保护的,只能在本类和子类中可以访问 2.类 ...
51Nod：活动安排问题（区间问题）
X轴上有N条线段,每条线段有1个起点S和终点E.最多能够选出多少条互不重叠的线段.(注:起点或终点重叠,不算重叠). 例如:[1 5][2 3][3 6],可以选[2 3][3 6],这2条线段互不重 ...

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

【FusionCharts学习-3】显示中国地图的更多相关文章

随机推荐

热门专题