JVectorMap 分级统计图

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>

运行结果

发表评论