代码信息

保存到分组
外部资源
$[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

/*
TODO:
- Check data labels after drilling. Label rank? New positions?
- Not US Mainland text
- Separators
*/
var data = Highcharts.geojson(Highcharts.maps['countries/us/us-all']),
	container = document.getElementById('container'),
	// Some responsiveness
	small = container.clientWidth < 400;
// Set drilldown pointers
Highcharts.each(data, function (d,i) {
	d.drilldown = d.properties['hc-key'];
	d.value = i; // Non-random bogus data
});
// Instanciate the map
Highcharts.mapChart(container, {
	chart : {
		events: {
			drilldown: function (e) {
				if (!e.seriesOptions) {
					var chart = this,
						mapKey = 'countries/us/' + e.point.drilldown + '-all',
						// Handle error, the timeout is cleared on success
						fail = setTimeout(function () {
							if (!Highcharts.maps[mapKey]) {
								chart.showLoading('<i class="icon-frown"></i> Failed loading ' + e.point.name);
								fail = setTimeout(function () {
									chart.hideLoading();
								}, 1000);
							}
						}, 3000);
					// Show the spinner
					chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>'); // Font Awesome spinner
					// Load the drilldown map
					$.getScript('https://img.hcharts.cn/mapdata/' + mapKey + '.js', function () {
						data = Highcharts.geojson(Highcharts.maps[mapKey]);
						// Set a non-random bogus value
						$.each(data, function (i) {
							this.value = i;
						});
						// Hide loading and add series
						chart.hideLoading();
						clearTimeout(fail);
						chart.addSeriesAsDrilldown(e.point, {
							name: e.point.name,
							data: data,
							dataLabels: {
								enabled: true,
								format: '{point.name}'
							}
						});
					});
				}
				this.setTitle(null, { text: e.point.name });
			},
			drillup: function () {
				this.setTitle(null, { text: 'USA' });
			}
		}
	},
	title : {
		text : 'Highcharts Map Drilldown'
	},
	subtitle: {
		text: 'USA',
		floating: true,
		align: 'right',
		y: 50,
		style: {
			fontSize: '16px'
		}
	},
	legend: small ? {} : {
		layout: 'vertical',
		align: 'right',
		verticalAlign: 'middle'
	},
	colorAxis: {
		min: 0,
		minColor: '#E6E7E8',
		maxColor: '#005645'
	},
	mapNavigation: {
		enabled: true,
		buttonOptions: {
			verticalAlign: 'bottom'
		}
	},
	plotOptions: {
		map: {
			states: {
				hover: {
					color: '#EEDD66'
				}
			}
		}
	},
	series : [{
		data : data,
		name: 'USA',
		dataLabels: {
			enabled: true,
			format: '{point.properties.postal-code}'
		}
	}],
	drilldown: {
		//series: drilldownSeries,
		activeDataLabelStyle: {
			color: '#FFFFFF',
			textDecoration: 'none',
			textShadow: '0 0 3px #000000'
		},
		drillUpButton: {
			relativeTo: 'spacingBox',
			position: {
				x: 0,
				y: 60
			}
		}
	}
});

<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/countries/us/us-all.js"></script>
<link href="https://img.hcharts.cn/libs/font-awesome/css/font-awesome.css" rel="stylesheet">
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

{"resource":"1,30,7,9,26","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"hhhhvb","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]