多级数据分类 | JShare

var columns = [
	["Country code","af","al","dz","as","ad","ao","ai","ar","am","aw","au","at","az","bs","bh","bd","bb","by","be","bz","bj","bm","bt","bo","ba","bw","br","bn","bg","bf","bi","kh","cm","ca","cv","ky","cf","td","cl","cn","co","km","cd","cg","cr","ci","hr","cu","cw","cy","cz","dk","dj","dm","do","ec","eg","sv","gq","er","ee","et","fo","fj","fi","fr","pf","ga","gm","ge","de","gh","gr","gl","gd","gu","gt","gn","gw","gy","ht","hn","hk","hu","is","in","id","ir","iq","ie","im","il","it","jm","jp","jo","kz","ke","ki","kp","kr","xk","kw","kg","la","lv","lb","ls","lr","ly","li","lt","lu","mo","mk","mg","mw","my","mv","ml","mt","mh","mr","mu","yt","mx","fm","md","mc","mn","me","ma","mz","mm","na","np","nl","nc","nz","ni","ne","ng","mp","no","om","pk","pw","pa","pg","py","pe","ph","pl","pt","pr","wa","ro","ru","rw","ws","sm","st","sa","sn","rs","sc","sl","sg","sk","si","sb","so","za","ss","es","lk","kn","lc","mf","vc","sd","sr","sz","se","ch","sy","tj","tz","th","tp","tg","to","tt","tn","tr","tm","tc","tv","ug","ua","ae","uk","us","uy","uz","vu","ve","vn","vi","ps","eh","ye","zm","zw"],
	["Country name","Afghanistan","Albania","Algeria","American Samoa","Andorra","Angola","Antigua and Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas, The","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","Brunei Darussalam","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Comoros","Congo, Dem. Rep.","Congo, Rep.","Costa Rica","Cote d'Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt, Arab Rep.","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Faeroe Islands","Fiji","Finland","France","French Polynesia","Gabon","Gambia, The","Georgia","Germany","Ghana","Greece","Greenland","Grenada","Guam","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hong Kong SAR, China","Hungary","Iceland","India","Indonesia","Iran, Islamic Rep.","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Kiribati","Korea, Dem. Rep.","Korea, Rep.","Kosovo","Kuwait","Kyrgyz Republic","Lao PDR","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macao SAR, China","Macedonia, FYR","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mayotte","Mexico","Micronesia, Fed. Sts.","Moldova","Monaco","Mongolia","Montenegro","Morocco","Mozambique","Myanmar","Namibia","Nepal","Netherlands","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Northern Mariana Islands","Norway","Oman","Pakistan","Palau","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Romania","Russian Federation","Rwanda","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovak Republic","Slovenia","Solomon Islands","Somalia","South Africa","South Sudan","Spain","Sri Lanka","St. Kitts and Nevis","St. Lucia","St. Martin (French part)","St. Vincent and the Grenadines","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syrian Arab Republic","Tajikistan","Tanzania","Thailand","Timor-Leste","Togo","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Turks and Caicos Islands","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","Uruguay","Uzbekistan","Vanuatu","Venezuela, RB","Vietnam","Virgin Islands (U.S.)","West Bank and Gaza","Western Sahara","Yemen, Rep.","Zambia","Zimbabwe"],
	["Population density 2010",53,117,15,342,181,15,202,15,109,597,3,102,110,34,1660,1142,636,47,359,15,80,1292,19,9,73,4,23,76,69,60,326,80,41,4,123,234,7,9,23,143,42,395,29,12,91,62,79,106,321,119,136,131,38,90,205,58,81,299,25,52,32,83,35,47,18,118,74,6,173,78,234,107,88,0,307,333,134,41,54,4,363,68,6783,112,3,394,132,45,73,65,145,352,206,250,350,69,6,71,123,202,504,167,154,28,27,36,413,72,41,4,225,53,195,19416,82,36,158,86,1053,13,1291,300,3,631,552,58,159,124,17704,2,47,72,30,73,3,209,492,14,17,48,12,174,132,16,9,225,45,47,15,16,23,313,126,116,449,152,93,9,431,65,526,172,14,65,83,188,82,7252,113,102,19,15,41,null,92,333,202,285,556,280,18,3,69,23,196,111,49,51,135,76,111,145,261,68,95,11,40,328,170,79,90,257,34,19,66,20,33,280,314,690,2,46,17,32]
];
// Read the columns into the data array
var data = [];
Highcharts.each(columns[0], function (code, i) {
	data.push({
		code: code.toUpperCase(),
		value: parseFloat(columns[2][i]),
		name: columns[1][i]
	});
});
// Initiate the chart
var map = Highcharts.mapChart('container', {
	chart : {
		borderWidth : 1
	},
	colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
			 'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
	title : {
		text : '世界各国人口密度 (/km²)'
	},
	mapNavigation: {
		enabled: true
	},
	legend: {
		title: {
			text: '人口密度（每 km2 人口数量）',
			style: {
				color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
			}
		},
		align: 'left',
		verticalAlign: 'bottom',
		floating: true,
		layout: 'vertical',
		valueDecimals: 0,
		backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
		symbolRadius: 0,
		symbolHeight: 14
	},
	colorAxis: {
		dataClasses: [{
			to: 3
		}, {
			from: 3,
			to: 10
		}, {
			from: 10,
			to: 30
		}, {
			from: 30,
			to: 100
		}, {
			from: 100,
			to: 300
		}, {
			from: 300,
			to: 1000
		}, {
			from: 1000
		}]
	},
	series : [{
		data : data,
		mapData: Highcharts.maps['custom/world'],
		joinBy: ['iso-a2', 'code'],
		animation: true,
		name: 'Population density',
		states: {
			hover: {
				color: '#BADA55'
			}
		},
		tooltip: {
			valueSuffix: '/km²'
		}
	}]
});

<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/custom/world.js"></script>
<div id="container">
</div>

#container {
	height: 500px; 
	min-width: 310px; 
	max-width: 800px; 
	margin: 0 auto; 
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

{"doctype":0,"resouces":"1,30,9,7","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

多级数据分类 | JShare

模板（查看所有模板）