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

随机推荐

TClientDataSet的FileName属性
读取cds文件数据. FileName一定要在设计时输入,否则程序运行时,不会自动读取cds文件. 因为FORM创建时,数据集组件也相应创建,如果是在运行时设置FileName,那么是在数据集组件创 ...
DevExpress v17.2最新版帮助文档下载大全
DevExpress v17.2.4帮助文档下载列表大全来啦!包含.NET.VCL.HTML/JS系列所有帮助文档,提供CHM和PDF两个版本.除已停止更新的Silverlight.Windows 8 ...
tomcat版本号的修改
我的是8.5.0我将其改为8.0.0 其他版本改也是一样我改这个版本号就是因为eclipse上没有tomcat8.5.0的配置所以将其改为8.0.0 在配置web服务器时 ...
Java并发系列
一.前言多线程怎么防止竞争资源,即防止对同一资源进行并发操作,那就是使用加锁机制.这是Java并发编程中必须要理解的一个知识点.其实使用起来还是比较简单,但是一定要理解. 有几个概念一定要牢记: 加 ...
GPA
原题: GPA Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
三值 bool? 进行与或运算后的结果
bool? 实际上是 Nullable<Boolean> 类型,可以当作三值的 bool 类型来使用.不过三值的布尔进行与或运算时的结果与二值有什么不同吗? 本文内容重载条件逻辑运算符“ ...
网络流初步：<最大流>——核心（增广路算法）（模板）
增广路的核心就是引入了反向边,使在进行道路探索选择的时候增加了类似于退路的东西[有一点dp的味道??] 具体操作就是:1.首先使用结构体以及数组链表next[ MAXN ]进行边信息的存储 2.[核心 ...
Executors Future Callable 使用场景实例
https://www.jb51.net/article/132606.htm: 我们都知道实现多线程有2种方式,一种是继承Thread,一种是实现Runnable,但这2种方式都有一个缺陷,在任务完 ...
hello1与hello2的代码分析
1.hello1代码分析 hello.java package javaeetutorial.hello1; import javax.enterprise.context.RequestScoped ...
test20181007 wzoi
题意分析考场40分错误的Manacher+dp. 用\(f(i)\)表示\(s_{1 \sim i}\)的最长偶数回文覆盖长度,在Manacher的同时用刷表法转移,每次还要对\(f(i-1)\ ...

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

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

随机推荐

热门专题