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>
运行结果
