代码信息

保存到分组
外部资源
$[libs.length]
暂无
- $[lib.showName]
添加新的资源

$[newLibMessage]

更多文件见开放CDN服务
快捷键
快捷键风格同 Sublime，同时支持 Emmet 特性，常用快捷键：

全局快捷键
- Ctrl + Enter：运行
- Ctrl + ←/→：折叠左侧菜单
- Ctrl + O：打开添加常用资源
- Ctrl + Z：撤销所有编辑器
- Ctrl + U：恢复所有编辑器
- F11：最大化运行结果
- ESC：关闭添加常用资源
编辑器快捷键
- Ctrl + Enter：运行
- Ctrl + /：注释代码
- Ctrl + H：格式化代码
- Ctrl + Z：撤销
- Ctrl + Y：恢复
- Tab：快捷生成代码
- Ctrl + L：选中当前行
- Ctrl + Q：折叠当前代码
- F11：最大化当前编辑器
关于

JShare 是一个在线代码测试、托管、分享的工具；

当前版本 $[base.version]，这里有更新日志；

使用前请查阅帮助文档及说明；

Copyright © 2020 JShare，由简数科技提供服务，浙ICP备16004892号-3

包含饼图的地图 | JShare

地图区块中用饼图来表示具体数据的占比

// New map-pie series type that also allows lat/lon as center option.
// Also adds a sizeFormatter option to the series, to allow dynamic sizing
// of the pies.
Highcharts.seriesType('mappie', 'pie', {
		center: null, // Can't be array by default anymore
		clip: true, // For map navigation
		states: {
				hover: {
						halo: {
								size: 5
						}
				}
		},
		dataLabels: {
				enabled: false
		}
}, {
		getCenter: function () {
				var options = this.options,
						chart = this.chart,
						slicingRoom = 2 * (options.slicedOffset || 0);
				if (!options.center) {
						options.center = [null, null]; // Do the default here instead
				}
				// Handle lat/lon support
				if (options.center.lat !== undefined) {
						var point = chart.fromLatLonToPoint(options.center);
						options.center = [
								chart.xAxis[0].toPixels(point.x, true),
								chart.yAxis[0].toPixels(point.y, true)
						];
				}
				// Handle dynamic size
				if (options.sizeFormatter) {
						options.size = options.sizeFormatter.call(this);
				}
				// Call parent function
				var result = Highcharts.seriesTypes.pie.prototype.getCenter.call(this);
				// Must correct for slicing room to get exact pixel pos
				result[0] -= slicingRoom;
				result[1] -= slicingRoom;
				return result;
		},
		translate: function (p) {
				this.options.center = this.userOptions.center;
				this.center = this.getCenter();
				return Highcharts.seriesTypes.pie.prototype.translate.call(this, p);
		}
});
var data = [
		// state, demVotes, repVotes, libVotes, grnVotes, sumVotes, winner, offset config for pies
		['Alabama','阿拉巴马州', 729547, 1318255, 44467, 9391, 2101660, -1],
		['Alaska','阿拉斯加州', 116454, 163387, 18725, 5735, 304301, -1],
		['Arizona','亚利桑那州', 1161167, 1252401, 106327, 34345, 2554240, -1],
		['Arkansas','阿肯色州', 380494, 684782, 29829, 9473, 1104578, -1],
		['California','加利福尼亚', 8577206, 4390272, 467370, 271047, 13705895, 1, { lon: -1, drawConnector: false }],
		['Colorado','科罗拉多', 1338870, 1202484, 144121, 38437, 2723912, 1],
		['Connecticut','康乃迪克州', 897572, 673215, 48676, 22841, 1642304, 1, { lat: -1.5, lon: 1 }],
		['Delaware','特拉华州', 235603, 185127, 14757, 6103, 441590, 1, { lat: -1.3, lon: 2 }],
		['District of Columbia','哥伦比亚特区', 282830, 12723, 4906, 4258, 304717, 1, { lat: -2, lon: 2 }],
		['Florida','佛罗里达', 4504975, 4617886, 207043, 64399, 9394303, -1],
		['Georgia','乔治亚州', 1877963, 2089104, 125306, 0, 4092373, -1],
		['Hawaii','夏威夷', 266891, 128847, 15954, 12737, 424429, 1, { lat: -0.5, lon: 0.5, drawConnector: false }],
		['Idaho','爱达荷州', 189765, 409055, 28331, 8496, 635647, -1],
		['Illinois','伊利诺斯州', 2977498, 2118179, 208682, 74112, 5378471, 1],
		['Indiana','印第安纳州', 1039126, 1557286, 133993, 7841, 2738246, -1],
		['Iowa','爱荷华州', 653669, 800983, 59186, 11479, 1525317, -1],
		['Kansas','堪萨斯州', 427005, 671018, 55406, 23506, 1176935, -1],
		['Kentucky','肯塔基州', 628854, 1202971, 53752, 13913, 1899490, -1],
		['Louisiana','路易斯安那州', 780154, 1178638, 37978, 14031, 2010801, -1],
		['Maine','缅因州', 352156, 332418, 37578, 13995, 736147, 1],
		['Maryland','马里兰州', 1502820, 878615, 78225, 33380, 2493040, 1, { lon: 0.6, drawConnector: false }],
		['Massachusetts','马萨诸塞州', 1995196, 1090893, 138018, 47661, 3271768, 1, { lon: 3 }],
		['Michigan','密歇根州', 2268839, 2279543, 172136, 51463, 4771981, -1],
		['Minnesota','明尼苏达州', 1367716, 1322951, 112972, 36985, 2840624, 1, { lon: -1, drawConnector: false }],
		['Mississippi','密西西比', 462127, 678284, 14411, 3595, 1158417, -1],
		['Missouri','密苏里', 1054889, 1585753, 96404, 25086, 2762132, -1],
		['Montana','蒙大纳', 174281, 273879, 28036, 7868, 484064, -1],
		['Nebraska','内布拉斯加州', 273185, 485372, 38746, 8337, 805640, -1],
		['Nevada','内华达', 539260, 512058, 37384, 0, 1088702, 1],
		['New Hampshire','新罕布什尔', 348526, 345790, 30694, 6465, 731475, 1],
		['New Jersey','新泽西州', 1967444, 1509688, 72143, 37131, 3586406, 1, { lat: -1, lon: 1.2 }],
		['New Mexico','新墨西哥州', 380923, 316134, 74544, 9797, 781398, 1],
		['New York','纽约', 4145376, 2638135, 162273, 100110, 7045894, 1],
		['North Carolina','北卡罗来纳州', 2169496, 2345235, 130021, 1038, 4645790, -1],
		['North Dakota','北达科他州', 93758, 216794, 21434, 378, 332364, -1],
		['Ohio','俄亥俄州', 2320596, 2776683, 174266, 44310, 5315855, -1],
		['Oklahoma','俄克拉荷马州', 420375, 949136, 83481, 0, 1452992, -1],
		['Oregon','俄勒冈州', 991580, 774080, 93875, 49247, 1908782, 1],
		['Pennsylvania','宾夕法尼亚州', 2874136, 2945302, 144826, 49334, 6013598, -1],
		['Rhode Island','罗德岛州', 227062, 166454, 14700, 6171, 414387, 1, { lat: -0.7, lon: 1.7 }],
		['South Carolina','南卡罗来纳州', 855373, 1155389, 49204, 13034, 2073000, -1],
		['South Dakota','南达科塔', 117442, 227701, 20845, 0, 365988, -1],
		['Tennessee','田纳西州', 868853, 1519926, 70286, 15952, 2475017, -1],
		['Texas','德克萨斯州', 3877868, 4685047, 283492, 71558, 8917965, -1],
		['Utah','犹他州', 222858, 375006, 39608, 7695, 645167, -1],
		['Vermont','佛蒙特州', 178573, 95369, 10078, 6758, 290778, 1, { lat: 2 }],
		['Virginia','弗吉尼亚州', 1981473, 1769443, 118274, 27638, 3896828, 1],
		['Washington','华盛顿', 1727840, 1210370, 160356, 57571, 3156137, 1],
		['West Virginia','西佛吉尼亚州', 187519, 486304, 22958, 8016, 704797, -1],
		['Wisconsin','威斯康星州', 1382947, 1407028, 106470, 31016, 2927461, -1],
		['Wyoming','怀俄明州', 55973, 174419, 13287, 2515, 246194, -1]
],
		maxVotes = 0,
		demColor = 'rgba(74,131,240,0.80)',
		repColor = 'rgba(220,71,71,0.80)',
		libColor = 'rgba(240,190,50,0.80)',
		grnColor = 'rgba(90,200,90,0.80)',
		idNameMap = {};
// 计算最大值，方便处理饼图的大小
Highcharts.each(data, function (row) {
		maxVotes = Math.max(maxVotes, row[6]);
		idNameMap[row[0]] = row[1];
});
Highcharts.setOptions({
		lang: {
				thousandsSep: ','  // 自定义千分号，默认是空格（ISO 国际标准）
		}
});
// 创建图表
var chart = Highcharts.mapChart('container', {
		title: {
				text: '2016 年美国总统大选的结果'
		},
		chart: {
				animation: false // Disable animation, especially for zooming
		},
		colorAxis: {
				dataClasses: [{
						from: -1,
						to: 0,
						color: 'rgba(244,91,91,0.5)',
						name: '共和党'
				}, {
						from: 0,
						to: 1,
						color: 'rgba(124,181,236,0.5)',
						name: '民主党'
				}, {
						from: 2,
						to: 3,
						name: '自由党',
						color: libColor
				}, {
						from: 3,
						to: 4,
						name: '绿党',
						color: grnColor
				}]
		},
		mapNavigation: {
				enabled: true
		},
		// Limit zoom range
		yAxis: {
				minRange: 1000
		},
		tooltip: {
				useHTML: true
		},
		// Default options for the pies
		plotOptions: {
				mappie: {
						borderColor: 'rgba(255,255,255,0.4)',
						borderWidth: 1,
						tooltip: {
								headerFormat: ''
						}
				}
		},
		series: [{
				mapData: Highcharts.maps['countries/us/us-all'],
				data: data,
				name: 'States',
				borderColor: '#FFF',
				showInLegend: false,
				joinBy: ['name', 'id'],
				keys: ['id','cname', 'demVotes', 'repVotes', 'libVotes', 'grnVotes',
							 'sumVotes', 'value', 'pieOffset'],
				tooltip: {
						headerFormat: '',
						pointFormatter: function () {
								var hoverVotes = this.hoverVotes; // Used by pie only
								return '<b>' + idNameMap[this.id] + ' 得票情况</b><br/>' +
										Highcharts.map([
										['民主党', this.demVotes, demColor],
										['共和党', this.repVotes, repColor],
										['自由党', this.libVotes, libColor],
										['绿党', this.grnVotes, grnColor]
								].sort(function (a, b) {
										return b[1] - a[1]; // Sort tooltip by most votes
								}), function (line) {
										return '<span style="color:' + line[2] +
												// Colorized bullet
												'">\u25CF</span> ' +
												// Party and votes
												(line[0] === hoverVotes ? '<b>' : '') +
												line[0] + '： ' +
												Highcharts.numberFormat(line[1], 0) +
												(line[0] === hoverVotes ? '</b>' : '') +
												'<br/>';
								}).join('') +
										'<hr/>总数: ' + Highcharts.numberFormat(this.sumVotes, 0);
						}
				}
		}, {
				name: 'Separators',
				type: 'mapline',
				data: Highcharts.geojson(Highcharts.maps['countries/us/us-all'], 'mapline'),
				color: '#707070',
				showInLegend: false,
				enableMouseTracking: false
		}, {
				name: 'Connectors',
				type: 'mapline',
				color: 'rgba(130, 130, 130, 0.5)',
				zIndex: 5,
				showInLegend: false,
				enableMouseTracking: false
		}]
});
// When clicking legend items, also toggle connectors and pies
Highcharts.each(chart.legend.allItems, function (item) {
		var old = item.setVisible;
		item.setVisible = function () {
				var legendItem = this;
				old.call(legendItem);
				Highcharts.each(chart.series[0].points, function (point) {
						if (chart.colorAxis[0].dataClasses[point.dataClass].name === legendItem.name) {
								// Find this state's pie and set visibility
								Highcharts.find(chart.series, function (item) {
										return item.name === point.id;
								}).setVisible(legendItem.visible, false);
								// Do the same for the connector point if it exists
								var connector = Highcharts.find(chart.series[2].points, function (item) {
										return item.name === point.id;
								});
								if (connector) {
										connector.setVisible(legendItem.visible, false);
								}
						}
				});
				chart.redraw();
		};
});
// Add the pies after chart load, optionally with offset and connectors
Highcharts.each(chart.series[0].points, function (state) {
		if (!state.id) {
				return; // Skip points with no data, if any
		}
		var pieOffset = state.pieOffset || {},
				centerLat = parseFloat(state.properties.latitude),
				centerLon = parseFloat(state.properties.longitude);
		// Add the pie for this state
		chart.addSeries({
				type: 'mappie',
				name: state.id,
				zIndex: 6, // Keep pies above connector lines
				sizeFormatter: function () {
						var yAxis = this.chart.yAxis[0],
								zoomFactor = (yAxis.dataMax - yAxis.dataMin) /
								(yAxis.max - yAxis.min);
						return Math.max(
								this.chart.chartWidth / 45 * zoomFactor, // Min size
								this.chart.chartWidth / 11 * zoomFactor * state.sumVotes / maxVotes
						);
				},
				tooltip: {
						// Use the state tooltip for the pies as well
						pointFormatter: function () {
								return state.series.tooltipOptions.pointFormatter.call({
										id: state.id,
										hoverVotes: this.name,
										demVotes: state.demVotes,
										repVotes: state.repVotes,
										libVotes: state.libVotes,
										grnVotes: state.grnVotes,
										sumVotes: state.sumVotes
								});
						}
				},
				data: [{
						name: 'Democrats',
						y: state.demVotes,
						color: demColor
				}, {
						name: 'Republicans',
						y: state.repVotes,
						color: repColor
				}, {
						name: 'Libertarians',
						y: state.libVotes,
						color: libColor
				}, {
						name: 'Green',
						y: state.grnVotes,
						color: grnColor
				}],
				center: {
						lat: centerLat + (pieOffset.lat || 0),
						lon: centerLon + (pieOffset.lon || 0)
				}
		}, false);
		// Draw connector to state center if the pie has been offset
		if (pieOffset.drawConnector !== false) {
				var centerPoint = chart.fromLatLonToPoint({
						lat: centerLat,
						lon: centerLon
				}),
						offsetPoint = chart.fromLatLonToPoint({
								lat: centerLat + (pieOffset.lat || 0),
								lon: centerLon + (pieOffset.lon || 0)
						});
				chart.series[2].addPoint({
						name: state.id,
						path: 'M' + offsetPoint.x + ' ' + offsetPoint.y +
						'L' + centerPoint.x + ' ' + centerPoint.y
				}, false);
		}
});
// Only redraw once all pies and connectors have been added
chart.redraw();

<div id="container" style="height:450px"></div>

{"resource":"3,7,31,52,https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js,https://img.hcharts.cn/mapdata/countries/us/us-all.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"I4p8zm","name":"包含饼图的地图","version":0,"doctype":0,"description":"地图区块中用饼图来表示具体数据的占比","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">","newGroup":7,"group":{"id":7,"name":"Highmaps","code":"highmaps"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

包含饼图的地图 | JShare

地图区块中用饼图来表示具体数据的占比

模板（查看所有模板）

外部资源
$[libs.length]