包含丰富的信息地图 | JShare

$.getJSON('/data/csv/world-population-history.csv', function (csv) {
		// Parse the CSV Data
		/*Highcharts.data({
            csv: data,
            switchRowsAndColumns: true,
            parsed: function () {
                console.log(this.columns);
            }
        });*/
		// Very simple and case-specific CSV string splitting
		function CSVtoArray(text) {
				return text.replace(/^"/, '')
						.replace(/",$/, '')
						.split('","');
		};
		csv = csv.split(/\n/);
		var countries = {},
				mapChart,
				countryChart,
				numRegex = /^[0-9\.]+$/,
				quoteRegex = /\"/g,
				categories = CSVtoArray(csv[1]).slice(4);
		// Parse the CSV into arrays, one array each country
		$.each(csv.slice(2), function (j, line) {
				var row = CSVtoArray(line),
						data = row.slice(4);
				$.each(data, function (i, val) {
						val = val.replace(quoteRegex, '');
						if (numRegex.test(val)) {
								val = parseInt(val);
						} else if (!val) {
								val = null;
						}
						data[i] = val;
				});
				countries[row[1]] = {
						name: row[0],
						code3: row[1],
						data: data
				};
		});
		// For each country, use the latest value for current population
		var data = [];
		for (var code3 in countries) {
				var value = null,
						year,
						itemData = countries[code3].data,
						i = itemData.length;
				while (i--) {
						if (typeof itemData[i] === 'number') {
								value = itemData[i];
								year = categories[i];
								break;
						}
				}
				data.push({
						name: countries[code3].name,
						code3: code3,
						value: value,
						year: year
				});
		}
		// Add lower case codes to the data set for inclusion in the tooltip.pointFormat
		var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
		$.each(mapData, function () {
				this.id = this.properties['hc-key']; // for Chart.get()
				this.flag = this.id.replace('UK', 'GB').toLowerCase();
		});
		// Wrap point.select to get to the total selected points
		Highcharts.wrap(Highcharts.Point.prototype, 'select', function (proceed) {
				proceed.apply(this, Array.prototype.slice.call(arguments, 1));
				var points = mapChart.getSelectedPoints();
				if (points.length) {
						if (points.length === 1) {
								$('#info #flag').attr('class', 'flag ' + points[0].flag);
								$('#info h2').html(points[0].name);
						} else {
								$('#info #flag').attr('class', 'flag');
								$('#info h2').html('Comparing countries');
						}
						$('#info .subheader').html('<h4>Historical population</h4><small><em>Shift + Click on map to compare countries</em></small>')
						if (!countryChart) {
								countryChart = $('#country-chart').highcharts({
										chart: {
												height: 250,
												spacingLeft: 0
										},
										credits: {
												enabled: false
										},
										title: {
												text: null
										},
										subtitle: {
												text: null
										},
										xAxis: {
												tickPixelInterval: 50,
												crosshair: true
										},
										yAxis: {
												title: null,
												opposite: true
										},
										tooltip: {
												shared: true
										},
										plotOptions: {
												series: {
														animation: {
																duration: 500
														},
														marker: {
																enabled: false
														},
														threshold: 0,
														pointStart: parseInt(categories[0]),
												}
										}
								}).highcharts();
						}
						$.each(points, function (i) {
								// Update
								if (countryChart.series[i]) {
										/*$.each(countries[this.code3].data, function (pointI, value) {
                            countryChart.series[i].points[pointI].update(value, false);
                        });*/
										countryChart.series[i].update({
												name: this.name,
												data: countries[this.code3].data,
												type: points.length > 1 ? 'line' : 'area'
										}, false);
								} else {
										countryChart.addSeries({
												name: this.name,
												data: countries[this.code3].data,
												type: points.length > 1 ? 'line' : 'area'
										}, false);
								}
						});
						while (countryChart.series.length > points.length) {
								countryChart.series[countryChart.series.length - 1].remove(false);
						}
						countryChart.redraw();
				} else {
						$('#info #flag').attr('class', '');
						$('#info h2').html('');
						$('#info .subheader').html('');
						if (countryChart) {
								countryChart = countryChart.destroy();
						}
				}
		});
		// Initiate the map chart
		mapChart = Highcharts.mapChart('container', {
				title : {
						text : 'Population history by country'
				},
				subtitle: {
						text: 'Source: <a href="http://data.worldbank.org/indicator/SP.POP.TOTL/countries/1W?display=default">The World Bank</a>'
				},
				mapNavigation: {
						enabled: true,
						buttonOptions: {
								verticalAlign: 'bottom'
						}
				},
				colorAxis: {
						type: 'logarithmic',
						endOnTick: false,
						startOnTick: false,
						min: 50000
				},
				tooltip: {
						footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
				},
				series : [{
						data : data,
						mapData: mapData,
						joinBy: ['iso-a3', 'code3'],
						name: 'Current population',
						allowPointSelect: true,
						cursor: 'pointer',
						states: {
								select: {
										color: '#a4edba',
										borderColor: 'black',
										dashStyle: 'shortdot'
								}
						}
				}]
		});
		// Pre-select a country
		mapChart.get('us').select();
});

<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/custom/world.js"></script>
<!-- Flag sprites service provided by Martijn Lafeber, https://github.com/lafeber/world-flags-sprite/blob/master/LICENSE -->
<link rel="stylesheet" type="text/css" href="https://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
<div id="wrapper">
		<div id="container"></div>
		<div id="info">
				<span class="f32"><span id="flag"></span></span>
				<h2></h2>
				<div class="subheader">Click countries to view history</div>
				<div id="country-chart"></div>
		</div>
</div>

#wrapper {
		height: 500px;
		width: 1000px;
		margin: 0 auto;
		padding: 0;
}
#container {
		float: left;
		height: 500px; 
		width: 700px; 
		margin: 0;
}
#info {
		float: left;
		width: 270px;
		padding-left: 20px;
		margin: 100px 0 0 0;
		border-left: 1px solid silver;
}
#info h2 {
		display: inline;
}
#info .f32 .flag {
		vertical-align: bottom !important;
}
#info h4 {
		margin: 1em 0 0 0;
}

{"doctype":0,"resouces":"1,3,31","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

模板（查看所有模板）