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

随机推荐

51nod1079
模板题... 代码: #include <iostream> using namespace std; ],p[]; int main() { int n; while(cin>&g ...
XE里， TStringField 还是 ansi的
{ TStringField } TStringField = class(TField) private FFixedChar: Boolean; FTransliterate: Boolean; ...
maven 构建war包时排除web.xml
在使用maven构建项目的war包时,有时并不需要src/webapp/WEB-INF/下的一些文件. 这时可以通过maven-war-plugin创建配置来排除这些文件.下面贴出我平时使用的pom. ...
git账号申请及创建基线
1.填写注册信息 https://github.com/ 进入官网填写用户名,邮箱,密码然后点击sign up for github 2.后面不记得了,然后就可以创建项目了 3.填写项目名称及描述, ...
dubbo支持的注册中心
dubbo支持的注册中心 Dubbo提供的注册中心有如下几种类型可供选择: Multicast注册中心 Zookeeper注册中心 Redis注册中心 Simple注册中心 ZooKeeper是一个开 ...
Springboot中使用缓存
在开发中,如果相同的查询条件去频繁查询数据库, 是不是会给数据库带来很大的压力呢?因此,我们需要对查询出来的数据进行缓存,这样客户端只需要从数据库查询一次数据,然后会放入缓存中,以后再次查询时可以从缓 ...
WPF中使用BitmapImage处理图片文件(转)
(1)图片从文件导入 BitmapImage image = new BitmapImage(); image.BeginInit(); image.UriSource = new Uri(filen ...
剑指offer-特定二维数组中查找一个元素是否存在-二分搜索-二维数组
int [][] array ={ {1,2,8,9}, {2,4,9,12}, {4,7,10,13}, {6,8,11,19} }; 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都 ...
龙儿经理嘴上经常说的B树
国内的数据结构教材一般是按照Knuth定义,即“阶”定义为一个节点的子节点数目的最大值. 对于一棵m阶B-tree,每个结点至多可以拥有m个子结点.各结点的关键字和可以拥有的子结点数都有限制规定m阶 ...
java类库 java API jar包 C语言函数库
翁凯说:java的强大是因为类库的强大 C/C++强大是因为函数库在程序中用到系统提供的标准函数库中的输入输出函数时应在程序的开头写上一行:#include"stdio.h"或 ...

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

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

随机推荐

热门专题