数据分类 | JShare

// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc&output=html
// 
var data = [
	["Key","al","ak","az","ar","ca","co","ct","de","dc","fl","ga","hi","id","il","in","ia","ks","ky","la","me","md","ma","mi","mn","ms","mo","mt","ne","nv","nh","nj","nm","ny","nc","nd","oh","ok","or","pa","ri","sc","sd","tn","tx","ut","vt","va","wa","wv","wi","wy"],
	["State","Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District of ColumbiaDistrict of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine (at-large)","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],
	["Barack Obama",795696,122640,1025232,394409,7854285,1323101,905083,242584,267070,4237756,1773827,306658,212787,3019512,1152887,822544,440726,679370,809141,401306,1677844,1921290,2564569,1546167,562949,1223796,201839,302081,531373,369561,2125101,415335,4485741,2178391,124827,2827710,443547,970488,2990274,279677,865941,145039,960709,3308124,251813,199239,1971820,1755396,238269,1620985,69286],
	["Mitt Romney",1255925,164676,1233654,647744,4839958,1185243,634892,165484,21381,4163447,2078688,121015,420911,2135216,1420543,730617,692634,1087190,1152262,292276,971869,1188314,2115256,1320225,710746,1482440,267928,475064,463567,329918,1477568,335788,2490431,2270395,188163,2661433,891325,754175,2680434,157204,1071645,210610,1462330,4569843,740600,92698,1822522,1290670,417655,1407966,170962],
	["Gary Johnson",12328,7392,32100,16276,143221,35545,12580,3882,2083,44726,45324,3840,9453,56229,50111,12926,20456,17063,18157,9352,30195,30920,7774,35098,6676,43151,14165,11109,10968,8212,21045,27788,47256,44515,5231,49493,0,24089,49991,4388,16321,5795,18623,88580,12572,3487,31216,42202,6302,20439,5326],
	["Jill Stein",3397,2917,7816,9305,85638,7508,863,1940,2458,8947,1516,3184,4402,30222,625,3769,714,6337,6978,8119,17110,20691,21897,13023,1588,0,0,0,0,324,9888,2691,39982,0,1361,18574,0,19427,21341,2421,5446,0,6515,24657,3817,594,8627,20928,4406,7665,0],
	["Others",6992,2870,452,1734,115445,18123,5542,31,772,19303,695,0,4721,835,368,12324,5441,7252,7527,2127,10309,6552,21465,22048,3625,7936,116,6125,9010,2957,6690,2156,17749,12071,3045,23630,0,21091,11630,2359,4765,2371,10400,2647,8638,3272,20304,16320,3806,11379,3487],
	["Margin  (Obama)",-22.19,-13.99,-9.06,-23.69,23.12,5.37,17.33,18.63,83.63,0.88,-7.82,42.71,-31.91,16.87,-10.2,5.81,-21.72,-22.69,-17.21,15.29,26.08,23.14,9.5,7.69,-11.5,-9.38,-13.65,-21.78,6.68,5.58,17.81,10.15,28.18,-2.04,-19.63,2.98,-33.54,12.09,5.39,27.46,-10.47,-18.02,-20.4,-15.78,-48.04,35.6,3.87,14.87,-26.76,6.94,-40.82]
];
/**
 * Event handler for clicking points. Use jQuery UI to pop up
 * a pie chart showing the details for each state.
 */
function pointClick() {
	var row = this.options.row,
		$div = $('<div></div>')
	.dialog({
		title: this.name,
		width: 400,
		height: 300
	});
	window.chart = new Highcharts.Chart({
		chart: {
			renderTo: $div[0],
			type: 'pie',
			width: 370,
			height: 240
		},
		title: {
			text: null
		},
		series: [{
			name: 'Votes',
			data: [{
				name: 'Obama',
				color: '#0200D0',
				y: data[3][row]
			}, {
				name: 'Romney',
				color: '#C40401',
				y: data[4][row]
			}],
			dataLabels: {
				format: '<b>{point.name}</b> {point.percentage:.1f}%'
			}
		}]
	});
}
// Make the columns easier to read
var keys = data[0],
	names = data[1],
	percent = data[7],
	// Build the chart options
	options = {
		chart: {
			renderTo: 'container',
			type: 'map',
			borderWidth: 1
		},
		title: {
			text: '2012年美国总统选举结果 '
		},
		subtitle: {
			text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
			'_2012">Wikipedia</a>'
		},
		legend: {
			align: 'right',
			verticalAlign: 'top',
			x: -100,
			y: 70,
			floating: true,
			layout: 'vertical',
			valueDecimals: 0,
			backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
		},
		mapNavigation: {
			enabled: true,
			enableButtons: false
		},
		colorAxis: {
			dataClasses: [{
				from: -100,
				to: 0,
				color: '#C40401',
				name: 'Romney'
			}, {
				from: 0,
				to: 100,
				color: '#0200D0',
				name: 'Obama'
			}]
		},
		series: [{
			data: [],
			mapData: Highcharts.maps['countries/us/us-all'],
			joinBy: 'postal-code',
			dataLabels: {
				enabled: true,
				color: '#FFFFFF',
				format: '{point.postal-code}',
				style: {
					textTransform: 'uppercase'
				}
			},
			name: 'Democrats margin',
			point: {
				events: {
					click: pointClick
				}
			},
			tooltip: {
				ySuffix: ' %'
			},
			cursor: 'pointer'
		}, {
			name: 'Separators',
			type: 'mapline',
			data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
			color: 'silver',
			showInLegend: false,
			enableMouseTracking: false
		}]
	};
keys = keys.map(function (key) {
	return key.toUpperCase();
});
Highcharts.each(options.series[0].mapData.features, function (mapPoint) {
	if (mapPoint.properties['postal-code']) {
		var postalCode = mapPoint.properties['postal-code'],
			i = $.inArray(postalCode, keys);
		options.series[0].data.push(Highcharts.extend({
			value: parseFloat(percent[i]),
			name: names[i],
			'postal-code': postalCode,
			row: i
		}, mapPoint));
	}
});
// Initiate the chart
window.chart = new Highcharts.Map(options);

<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/countries/us/us-all.js"></script>
<script src="https://img.hcharts.cn/libs/jquery-ui/jquery-ui.min.js"></script>
<link href="https://img.hcharts.cn/libs/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://img.hcharts.cn/libs/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<div id="container">
</div>

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

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

模板（查看所有模板）