【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地图的定位误差比较大,在模 ...

随机推荐

hdu4333
题解: EX_KMP 先把串复制一遍放到后面这样旋转就是每一个前缀了然后做一个EX_KMP 然后看一下后一个字符谁大谁小代码: #include<cstdio> #include&l ...
struts2返回json字符串
参考链接:http://www.cnblogs.com/starsli/p/4733669.html 1.通过使用struts2-json-plugin 插件来实现 2.通过收到使用json-lib提 ...
C++11标准的智能指针、野指针、内存泄露的理解（日后还会补充，先浅谈自己的理解）
1.野指针的概念.成因以及避免首先,来说说什么是野指针,所谓野指针就是一个指向未申请访问受限的内存区域或者已经删除了的对象的指针. 什么意思呢?就是本来一个指针指向一个对象.一块内存,但是由于程序( ...
linux驱动程序：控制发光二极管
一个完整的Linux驱动包括内部处理和交互两部分.其中内部处理主要是指Linux驱动的装载.卸载.与设备文件的相关动作处理以及业务逻辑等.与硬件交互主要是指通过iowrite32.ioread32 ...
java异常（编程思想）
通过异常处理错误 java的基本理念是“结构不佳的代码不能运行” 发现错误的理想时机是在编译阶段,也就是在你试图运行程序之前.然而编译期间并不能找出所有的错误,余下的问题必须在运行间解决.这就需要错误 ...
WIN-8“内置管理员无法激活此应用”问题
解决办法:在运行中输入:“gpedit.msc”,就会启动组策略编辑器,依次展开“计算机配置”里面的“Windows设置”,然后是“安全设置”,再就是“本地策略”里面的“安全选项”,在右边查找一项策略 ...
子域名爆破&C段查询&调用Bing查询同IP网站
在线子域名爆破 <?php function domainfuzz($domain) { $ip = gethostbyname($domain); preg_match("/\d+\ ...
struts2读取request,session,application中的值
request.----> <s:property value="#request.mySessionPropKey"/> or <s:property v ...
iPhone/iPad被停用怎么办 3招轻松解锁
家中小孩玩电脑游戏,自己拿了iPad,随便输入密码,结果造成平板电脑无法使用,相信这是许多家长都将面对或是早已发生的事情.本文整理当iPhone或是iPad被停用时的处理方法. iPhone被停用为 ...
Word所有字体按比例缩小
ctrl + [ 不然每次都要一部分一部分的修改啊

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

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

随机推荐

热门专题