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

随机推荐

POJ 2663 Tri Tiling 矩阵快速幂难度:3
Tri Tiling Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7841 Accepted: 4113 Descri ...
用正则表达式匹配用rdf3x处理过后的TTL格式文档
1.比如下面这个用rdf3x处理过后的TTL文档片段: 注意缩进的是两个空格 <http://rdf.ebi.ac.uk/resource/chembl/target/CHEMBL2363853 ...
0107 for循环练习
//画菱形 for(int hs = 1; hs < 11; hs++) { //画空格 for(int kg = 9; kg >= hs; kg--) { System.out.prin ...
pl/sql中误删表中数据并提交恢复办法
最近在操作表中数据时,删除了表中数据,但是又想恢复,后来查到了官方的一篇文档,发现还蛮有用的,如下: 在pl/sql中运行,select * from A as of TIMESTAMP to_tim ...
RSA签名验证无法通过，检查以下部分
RSA签名验证无法通过,检查以下部分:1.是否和上游交换公钥,提交给上游的公钥是否配置正确并生效2.检查加密方式是SHA1还是MD5,是否跟上游一致3.上游采用的是否是base64SafeUrl的方式 ...
MovingBoxes左右滑动放大图片插件
MovingBoxes左右滑动放大图片插件在产品预览时很有用哦实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
OC基础:属性.点语法.KVC 分类： ios学习 OC 2015-06-24 17:24 61人阅读评论(0) 收藏
属性:快速生成setter和getter 属性也包括:声明和实现 1.属性的声明写在.h中格式:@property 数据类型变量名; 如果实例变量一致的时候,属性的声明可以合并,每一个属性之间使用 ...
Qt 获取组合键键盘按住某键鼠标组合实现
#include "mainwindow.h" #include <QDebug> #include <QKeyEvent> #include <QM ...
[转]一种让超大banner图片不拉伸、全屏宽、居中显示的方法
现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气.这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分.实现方法如下: <html> ...
关于Gson无法将匿名类转化为json字符串的问题
在使用gson过程中,一般会将数据存在一个对象模型中,使用gson将模型转换成json字符串用于数据交互. 代码形如: ArrayList<String> list = new Array ...

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

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

随机推荐

热门专题