代码信息

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

Highcharts 绘制环形进度条 | JShare

参考：https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/

var renderer = new Highcharts.Renderer(document.getElementById('container'), 220, 220),
	r = 100, // 半径
	perimeter = Math.PI * r * 2, // 周长
	process = null,
	text = null,
	value = document.getElementById('value');
// 背景环
renderer.circle(r +10 ,  r + 10, r).attr({
	fill: 'none',
	stroke: '#eee',
	'stroke-width': 10
}).add();
// 进度环
process = renderer.circle(r +10 ,  r + 10, r).attr({
	fill: 'none',
	stroke: '#22b24c',
	'stroke-width': 10,
	transform: 'matrix(0,-1,1,0,0,220)',
	'stroke-linecap': 'round',
	'stroke-dasharray': perimeter * 50 / 100 + ' ' + perimeter
}).add();
// 文字
text = renderer.label('50%', r + 10, r+10, null, null, null, false, true).css({
	color: '#22b24c',
	fontSize: '20px',
	fontWeight: 'bold'
}).add();
// 文字对齐
text.attr({
	x: text.x - text.width / 2,
	y: text.y + text.height /4 
});
// 监听 input 值并更新进度
Highcharts.addEvent(value, 'change', function() {
	process.attr({
		'stroke-dasharray': perimeter * value.value / 100 + ' ' + perimeter
	});
	text.attr({
		text: value.value + '%'
	});
});

<div class="wrapper">
	<div id="container"></div>
	<br>
	0 <input id="value" type="range" min="0" max="100" value="50"> 100
</div>

.wrapper {
	margin: 2em auto;
	width: 500px;
	text-align:center;
}
#container {
	width: 220px;
	height: 220px;
	margin: 2em auto;
}
circle {
	-webkit-transition: stroke-dasharray .25s;
	transition: stroke-dasharray .25s;
}

{"resource":"3","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":\"2\"}}","code":{"code":"5Odc3m","name":"Highcharts 绘制环形进度条","version":0,"doctype":0,"description":"参考：https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/","meta":"","newGroup":1940,"group":{"id":1940,"name":"简数 Vip","code":"jianshu"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

Highcharts 绘制环形进度条 | JShare

参考：https://www.zhangxinxu.com/wordpress/2015/07/svg-circle-loading/

模板（查看所有模板）

外部资源
$[libs.length]