代码信息

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

$(function() {
	var chart = new Highcharts.Chart({
		chart: {
			renderTo: 'chart-3d',
			type: 'scatter',
			options3d: {
				enabled: true,
				alpha: 10,
				beta: 50,
				depth: 450,
				viewDistance: 5,
				fitToPlot: false,
				frame: {
					bottom: {
						size: 1,
						color: 'rgba(0,0,0,0.2)'
					},
					back: {
						size: 1,
						color: 'rgba(0,0,0,0.2)'
					},
					side: {
						size: 1,
						color: 'rgba(0,0,0,0.2)'
					}
				}
			}
		},
		title: {
			useHTML: true,
			x: -12,
			y: 10,
			text: '<span class="chart-title">Projections<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
		},
		plotOptions: {
			scatter: {
				width: 10,
				height: 10,
				depth: 10
			}
		},
		tooltip: {
			formatter: function() {
				return this.point.name;
			}
		},
		yAxis: {
			min: 0,
			max: 10,
			title: null,
			gridLineWidth: 1
		},
		xAxis: {
			min: 0,
			max: 10,
			gridLineWidth: 1
		},
		legend: {
			enabled: false
		},
		zAxis: {
			min: 0,
			max: 10,
			showFirstLabel: false,
			gridLineWidth: 1
		},
		plotOptions: {
			series: {
				states: {
					hover: {
						halo: false
					}
				}
			}
		},
		series: [{
			name: 'Solar System',
			animation: {
				duration: 10
			},
			planeProjection: {
				enabled: true,
				byPoint: true
			},
			lineProjection: {
				enabled: true,
				colorByPoint: true
			},
			marker: {
				radius: 13,
				symbol: 'circle',
				fillColor: {
					radialGradient: {
						cx: 0.4,
						cy: 0.3,
						r: 0.5
					},
					stops: [
						[0, 'rgba(195,195,255,1)'],
						[1, 'rgba(0,0,255,1)']
					]
				}
			},
			data: [{
				name: 'planet',
				x: 7,
				y: 5,
				z: 5,
				color: 'rgba(100,100,200,1)',
				className: 'planet',
			}, {
				x: 5,
				y: 5,
				z: 5,
				name: 'sun',
				color: 'yellow',
				className: 'sun',
				marker: {
					states: {
						hover: {
							radius: 18,
							fillColor: {
								radialGradient: {
									cx: 0.4,
									cy: 0.3,
									r: 0.5
								},
								stops: [
									[0, 'rgba(255,255,255,1)'],
									[1, 'rgba(255,255,0,1)']
								]
							}
						}
					},
					radius: 18,
					fillColor: {
						radialGradient: {
							cx: 0.4,
							cy: 0.3,
							r: 0.5
						},
						stops: [
							[0, 'rgba(255,255,255,1)'],
							[1, 'rgba(255,255,0,1)']
						]
					}
				}
			}, {
				x: 7.5,
				y: 5,
				z: 5,
				name: 'moon',
				color: 'rgba(200,100,100,1)',
				className: 'moon',
				marker: {
					radius: 4,
					fillColor: {
						radialGradient: {
							cx: 0.4,
							cy: 0.3,
							r: 0.5
						},
						stops: [
							[0, 'rgba(159,159,255,1)'],
							[1, 'rgba(159,159,0,1)']
						]
					},
					states: {
						hover: {
							radius: 4,
							fillColor: {
								radialGradient: {
									cx: 0.4,
									cy: 0.3,
									r: 0.5
								},
								stops: [
									[0, 'rgba(159,159,255,1)'],
									[1, 'rgba(159,159,0,1)']
								]
							}
						}
					}
				}
			}]
		}]
	}, function(chart) {
		var series = chart.series[0],
			i = 1,
			start = false,
			cos = Math.cos,
			sin = Math.sin,
			PI = Math.PI,
			x, y, z, interval;
		$('.btn').click(function() {
			start = !start;
			point = series.data[0];
			point2 = series.data[2];
			if (start) {
				interval = setInterval(function() {
					x = 5;
					y = 5;
					z = 4.3;
					x += 1 * cos(i * 2 * PI / 60);
					z += 2 * sin(i * 2 * PI / 60);
					point.update([x, y, z], false);
					x += 0.5 * cos(i * 2 * PI / 30);
					z += 0.5 * sin(i * 2 * PI / 30);
					point2.update([x, y, z], false);
					chart.redraw(false);
					i++;
				}, 40);
			} else {
				clearInterval(interval);
			}
		});
	});
	$(chart.container).bind('mousedown.hc touchstart.hc', function(eStart) {
		eStart = chart.pointer.normalize(eStart);
		var posX = eStart.pageX,
			posY = eStart.pageY,
			alpha = chart.options.chart.options3d.alpha,
			beta = chart.options.chart.options3d.beta,
			newAlpha,
			newBeta,
			sensitivity = 5; // lower is more sensitive
		$(document).bind({
			'mousemove.hc touchdrag.hc': function(e) {
				newBeta = beta + (posX - e.pageX) / sensitivity;
				chart.options.chart.options3d.beta = newBeta;
				newAlpha = alpha + (e.pageY - posY) / sensitivity;
				chart.options.chart.options3d.alpha = newAlpha;
				chart.redraw(false);
			},
			'mouseup touchend': function() {
				$(document).unbind('.hc');
			}
		});
	});
});

<div id="chart-3d"></div>
<svg style="height: 0px;">
	<defs>
		<radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-0">
			<stop offset="0" stop-color="rgb(195,195,255)" stop-opacity="1"></stop>
			<stop offset="1" stop-color="rgb(0,0,255)" stop-opacity="1"></stop>
		</radialGradient>
		<radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-1">
			<stop offset="0" stop-color="rgb(255,255,255)" stop-opacity="1"></stop>
			<stop offset="1" stop-color="rgb(255,255,0)" stop-opacity="1"></stop>
		</radialGradient>
		<radialGradient cx="0.4" cy="0.3" r="0.5" id="gradient-2">
			<stop offset="0" stop-color="rgb(159,159,255)" stop-opacity="1"></stop>
			<stop offset="1" stop-color="rgb(159,159,0)" stop-opacity="1"></stop>
		</radialGradient>
	</defs>
</svg>
<button class="btn">
	live chart
</button>

@import 'https://code.highcharts.com/css/highcharts.css';
/* Highcharts */
.highcharts-title { width: calc(100% - 30px)!important; }
.highcharts-background { fill: #f7f7f7; stroke: #e8eaeb; stroke-width: 5;}
.highcharts-navigator-mask-outside { fill-opacity: 0; }
.highcharts-plot-line { stroke-width: 10px; stroke: #a4c08e; }
.highcharts-plot-band { fill: #FCFFC5; fill-opacity: 1; }
/* Custom */
.btn { float: left; background-color: #d4d4d4; border: none; color: #000; cursor: pointer; }
#flash { color: #000000; background-color: rgb(90, 200, 90); display: none; height: 30px; width: calc(100% + 10px); }
#report { padding: 7px 0px 7px 10px; }
.chart-title { background-color: #3d3d3d; color: #fff; float: left; font-size: 0.756em; padding: 10px; width: calc(100% - 1px); }
.chart-subtitle { line-height: 1.7em; font-size: 0.8em; padding-right: 10px; color: rgba(255, 0, 0, 0.8); float: right; }
.chart-href, .chart-href a, .chart-href a:hover { float: right; color: red; text-decoration: none }
h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; padding: 0; }
body { background-color: #fff; color: #737373; font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size: 0.6em; margin: 10px 13px 10px 13px; line-height: 1.2em; }
table { margin: 10px 0 15px 0; border-collapse: collapse; }
td, th { border: 1px solid #ddd; padding: 3px 10px; }
th {  padding: 5px 10px; }
a {  color: #0069d6; }
a:hover { color: #0050a3; text-decoration: none; }
a img { border: none; }
p { margin-bottom: 9px; }
h1, h2, h3, h4, h5, h6 { color: #404040; line-height: 36px; }
h1 { margin-bottom: 18px; font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 {font-size: 14px; }
h6 { font-size: 13px; }
hr { margin: 0 0 19px;  border: 0;  border-bottom: 1px solid #ccc; }
blockquote {padding: 13px 13px 21px 15px;margin-bottom: 18px;font-family: georgia, serif;font-style: italic; }
blockquote:before {content: "\201C";font-size: 40px;margin-left: -10px;font-family: georgia, serif;color: #eee; }
blockquote p {font-size: 14px;font-weight: 300;line-height: 18px;margin-bottom: 0;font-style: italic; }
code, pre {font-family: Monaco, Andale Mono, Courier New, monospace; }
code {background-color: #fee9cc;color: rgba(0, 0, 0, 0.75);padding: 1px 3px;font-size: 12px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; }
pre {display: block;padding: 14px;margin: 0 0 18px;line-height: 16px;font-size: 11px;border: 1px solid #d9d9d9;white-space: pre-wrap;word-wrap: break-word; }
pre code {background-color: #fff;color: #737373;font-size: 11px;padding: 0; }
sup {font-size: 0.83em;vertical-align: super;line-height: 0; }
* {-webkit-print-color-adjust: exact; }
@media screen and (min-width: 914px) {
	body {  width: 100%;  margin: 10px auto;} 
}
@media print {
	body,code,pre code,h1,h2,h3,h4,h5,h6 {  color: black;}table,pre {  page-break-inside: avoid;} 
}
#chart, #chart-advanced, #chart-3d {height: 500px;width: 100%;position: relative; }
/* Annotations UI */
.form {margin-right: 10px;width: 160px;height: 330px;padding: 0px;background-color: #e8eaeb;padding: 5px;float: left;font-size: 1.4em; }
.form .form-header {font-size: 1em;padding: 10px;background: #3d3d3d;color: #fff;line-height: 1.45em; }
.form > p {padding: 5px 10px;margin: 0px; }
.form > p:nth-child(2n) { background: #f7f7f7; }
.form label {width: 140px;float: left;margin-top: 5px;padding-bottom: 3px; }
.form input {width: 140px; }
.form input[type="radio"] {width: auto;margin-left: 55px;margin-bottom: 3px; }
.form .short {width: 60px;float: right;margin: 2px 0px 0px 0px; }
.highcharts-indicators { fill: none; }
#chart-advanced .highcharts-yaxis .highcharts-axis-line { stroke-width: 2px; }
#chart-advanced .highcharts-plot-line { stroke-width: 1px; stroke: orange; }
/* ==== 3d ==== */
#chart-3d .highcharts-background { fill: #000;}
#chart-3d .highcharts-series.highcharts-series-0 path { stroke-width: 0; }
#chart-3d .highcharts-grid-line { stroke-width: 1px; stroke: #d8d8d8;}
#chart-3d .chart-title { width: calc(100% + 4px); }
/* custom gradients */
#chart-3d .moon { fill-opacity: 1; fill: url(#gradient-2); stroke-width:0; }
#chart-3d .sun { fill-opacity: 1; fill: url(#gradient-1); stroke-width:0; }
#chart-3d .planet { fill-opacity: 1; fill: url(#gradient-0); stroke-width:0; }
#chart-3d .magneticFieldPink { fill-opacity: 1; fill: url(#magneticFieldPink); stroke-width:0; }
#chart-3d .magneticFieldBlue { fill-opacity: 1; fill: url(#magneticFieldBlue); stroke-width:0; }

{"resource":"1,3,6,7,63,https://blacklabel.github.io/projections/js/projections.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"MIPWbw","name":"太阳系三维动画","version":0,"doctype":0,"description":"","meta":"","newGroup":441,"group":{"id":441,"name":"默认分组","code":"jianshukeji"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

太阳系三维动画 | JShare

模板（查看所有模板）

外部资源
$[libs.length]