Choropleth map 即分级统计图。在整个制图区域的若干个小的区划单元内(行政区划或者其他区划单位),根据各分区资料的数量(相对)指标进行分级,并用相应色级或不同疏密的晕线,反映各区现象的集中程度或发展水平的分布差别。
分级统计图法可反映布满整个区域的现象(如地貌切割密度)、呈点状分布的现象(如居民点的密度)或线状分布的现象(如河流密度或道路网密度),但较多的是反映呈面状但属分散分布的现象,如反映人口密度、某农作物播种面积的比、人均收入等。此法因常用色级表示,故亦称色级统计图法。
在创建了世界地图后,我们可以使用其他参数改变地图的外观,具体参数描述请参看 JVectorMap API 。
接下来我们将创建一个 choropleth map ,这个例子中我们将会对2010年各个国家的 GDP 信息进行展示。首先我们需要一些数据,可以从 IMF 网站上去下载得到格式为 XLS
的数据文件,然后将之转化为下面的格式,将文件存储为名字为 gdp-data.js 的文件。
var gdpData = { "AF": 16.63, "AL": 11.58, "DZ": 158.97, ... };
将此文件引入后,修改初始化代码如下:
$('#world-map-gdp').vectorMap({ map: 'world_mill_en', series: { regions: [{ values: gdpData, scale: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial' }] }, onRegionLabelShow: function(e, el, code){ el.html(el.html()+' (GDP - '+gdpData+')'); } });
附完整的代码
<!DOCTYPE html> <html> <head> <title>jVectorMap demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link rel="stylesheet" media="screen" href="js/jquery-jvectormap-1.2.2.css" type="text/css"/> <script src="js/jquery-1.8.2.js"></script> <script src="js/jquery-jvectormap-1.2.2.min.js"></script> <script src="js/jquery-jvectormap-world-mill-en.js"></script> <script src="js/gdp-data.js"></script> </head> <body style="margin:auto"> <div id="world-map" style="width: 100%; height: 400px"></div> <script> $(function(){ $('#world-map').vectorMap({ map: 'world_mill_en', series: { regions: [{ values: gdpData, scale: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial' }] }, onRegionLabelShow: function(e, el, code){ el.html(el.html()+' (GDP - '+gdpData+')'); } }); }); </script> </body> </html>
运行结果