代码信息

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

// Build the chart
Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie',
		animation: false
	},
	title: {
		text: '浏览器市场份额'
	},
	subtitle: {
		text: '数据来源：<a href="https://netmarketshare.com/browser-market-share.aspx">netmarketshare.com</a>'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			animation: false,
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: false
			},
			showInLegend: true
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		center: ['25%', '50%'],
		endAngle: 102,
		startAngle: 102,
		dataLabels: {
			enabled: true,
			inside: true,
			distance: -30,
			format: '{y}%'
		},
		data: [{
			name: 'Chrome',
			y: 66.46,
		}, {
			name: 'Firefox',
			y: 9.5
		},{
			name: 'Internet Explorer',
			y: 8.84
		},  {
			name: 'Edge',
			y: 4.71
		}, {
			name: 'Safari',
			y: 3.62
		}, {
			name: 'Other(<2%)',
			y: 6.87,
			sliced: true,
			showInLegend: false,
			selected: true
		}],
	},{
		name: 'Others',
		// linkedPoint: [0, 5],
		colorByPoint: true,
		center: ['75%', '50%'],
		size: '60%',
		dataLabels: {
			enabled: true,
			inside: true,
			distance: -30,
			format: '{y}%'	
		},
		// showInLegend: false,
		data: [{
			name: 'Opera',
			y: 1.6
		},{
			name: 'Sogou Explorer',
			y: 1.46,
		}, {
			name: 'QQ',
			y: 1.43
		}, {
			name: 'Yandex',
			y: 0.74
		}, {
			name: 'UC',
			y: 0.48
		},{
			name: 'others(<0.4%)',
			y: 1.16
		}]
	}]
}, function(chart) {
	let parentSeries = chart.series[0],
		points = parentSeries.points,
		paretPoint = points[points.length -1],
		targetSeries= chart.series[1],
		renderer = chart.renderer,
		shapeArgs = paretPoint.shapeArgs,
		targetCenter = targetSeries.center;
	let paths = ['M', 
				 // x + plotLeft + r * cos(deg) + 10 // 
				 shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r + 10,
				 shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r ,
				 'L', 
				 targetCenter[0] + chart.plotLeft,  
				 chart.plotTop + targetCenter[1] - targetCenter[2] /2,
				 'M',
				 targetCenter[0] + chart.plotLeft,  
				 chart.plotTop + targetCenter[1]  + targetCenter[2] / 2,
				 'L',
				 shapeArgs.x + chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r + 10,
				 shapeArgs.y + chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r
				];
	renderer.path(paths).attr({
		stroke: '#000',
		'stroke-width': 1
	}).add();
});

<div id="container" style="min-width:400px;height:400px"></div>

{"resource":"3,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":\"2\"}}","code":{"code":"hhhhDQ","name":"饼图关联","version":55,"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":1940,"group":{"id":1940,"name":"简数 Vip","code":"jianshu"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

饼图关联 | JShare

模板（查看所有模板）

外部资源
$[libs.length]