代码信息

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

x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻 | JShare

x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻

var chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container',
		type: 'column',
		options3d: {
			enabled: true,
			cropThreshold:100,
			alpha: 0,
			beta: 0,
			depth: 20/* ,
                    viewDistance: 25 */
		},
		events: {
			drillup: function (e) { 
				var id = e.seriesOptions.id;
				var divHigh= $("#container").css("height");  //document.getElementById().style.height
				//alert(divHigh);
				//$("#container").css("height",divHigh+30);
				this.reflow();
			}
		}
	},
	title: {
		text: '交互性3D柱状图'
	},
	subtitle: {
		text: '可通过滑动下方滑块测试'
	},
	xAxis: {
		type: 'category',
		//minTickInterval:2,
		//minPadding:50,
		//tickInterval:5,
		/* labels: {
            step: 5//就是这里设置间隔的大小
        } */
		/* labels:{
            x:45,//调节x偏移
         } */
		//labels: {rotation: -20, align: 'right', style: { font: 'normal 13px Verdana, sans-serif'}}
	},
	//4.设置滚动条可用
	scrollbar: {
		enabled: true
	},
	yAxis: {
		title: {
			text: '总的市场份额'
		}
	},
	plotOptions: {
		column: {
			depth: 25,
			// x轴每个点只用一个柱，则这个属性设置的是相邻的两个点的柱之间的间距。 
			// 如果x轴每个点有2个柱，则这个属性设置的是左侧点的右柱与右侧点的左柱之间的间距。 
			// 0.5的含义是，如果x轴长100px,则间距是100*0.5=50px 
			pointPadding : 100, 
			// 如果x轴一个点有两个柱，则这个属性设置的是这两个柱的间距。 
			groupPadding : 50,
			pointWidth: 40  //设置柱子宽度
		}
	},
	series: [{
		name: '浏览器品牌',
		colorByPoint: true,
		data: [{
			name: '微软微软等等等等等等等Microsoft Internet Explorer',
			y: 56.33,
			drilldown: 'Microsoft Internet Explorer'
		}, {
			name: '谷歌谷歌谷歌谷歌谷歌谷歌谷歌Chrome',
			y: 24.03,
			drilldown: 'Chrome'
		}, {
			name: '火狐火狐火狐火狐Firefox',
			y: 10.38,
			drilldown: 'Firefox'
		}, {
			name: 'Safari',
			y: 4.77,
			drilldown: 'Safari'
		}, {
			name: '腾讯浏览器qqbroser666',
			y: 24.03,
			drilldown: null
		}, {
			name: '360浏览器',
			y: 10.38,
			drilldown: null
		}, {
			name: 'UC浏览器',
			y: 4.77,
			drilldown: null
		}, {
			name: '遨游浏览器',
			y: 4.77,
			drilldown: null
		}, {
			name: '腾讯浏览器222222',
			y: 24.03,
			drilldown: null
		}, {
			name: '360浏览器22222',
			y: 10.38,
			drilldown: null
		}, {
			name: 'UC浏览器222222',
			y: 4.77,
			drilldown: null
		}, {
			name: '遨游浏览器22222',
			y: 4.77,
			drilldown: null
		},{
			name: 'Opera',
			y: 0.91,
			drilldown: null
		}, {
			name: 'Proprietary or Undetectable',
			y: 0.2,
			drilldown: null
		}]
	}],
	drilldown: {
		series: [{
			name: 'Microsoft Internet Explorer',
			id: 'Microsoft Internet Explorer',
			data: [
				[
					'v11.0',
					24.16
				],
				[
					'v8.0',
					17.2
				],
				[
					'v9.0',
					8.11
				],
				[
					'v10.0',
					5.33
				],
				[
					'v6.0',
					1.06
				],
				[
					'v7.0',
					0.5
				]
			]
		}, {
			name: 'Chrome',
			id: 'Chrome',
			data: [
				[
					'v40.0',
					5
				],
				[
					'v41.0',
					4.32
				],
				[
					'v42.0',
					3.68
				],
				[
					'v39.0',
					2.96
				],
				[
					'v36.0',
					2.53
				],
				[
					'v43.0',
					1.45
				],
				[
					'v31.0',
					1.24
				],
				[
					'v35.0',
					0.85
				],
				[
					'v38.0',
					0.6
				],
				[
					'v32.0',
					0.55
				],
				[
					'v37.0',
					0.38
				],
				[
					'v33.0',
					0.19
				],
				[
					'v34.0',
					0.14
				],
				[
					'v30.0',
					0.14
				]
			]
		}, {
			name: 'Firefox',
			id: 'Firefox',
			data: [
				[
					'v35',
					2.76
				],
				[
					'v36',
					2.32
				],
				[
					'v37',
					2.31
				],
				[
					'v34',
					1.27
				],
				[
					'v38',
					1.02
				],
				[
					'v31',
					0.33
				],
				[
					'v33',
					0.22
				],
				[
					'v32',
					0.15
				]
			]
		}, {
			name: 'Safari',
			id: 'Safari',
			data: [
				[
					'v8.0',
					2.56
				],
				[
					'v7.1',
					0.77
				],
				[
					'v5.1',
					0.42
				],
				[
					'v5.0',
					0.3
				],
				[
					'v6.1',
					0.29
				],
				[
					'v7.0',
					0.26
				],
				[
					'v6.2',
					0.17
				]
			]
		}, {
			name: 'Opera',
			id: 'Opera',
			data: [
				[
					'v12.x',
					0.34
				],
				[
					'v28',
					0.24
				],
				[
					'v27',
					0.17
				],
				[
					'v29',
					0.16
				]
			]
		}]
	}
});
//将当前角度信息同步到 DOM 中
var alphaValue = document.getElementById('alpha-value'),
	betaValue = document.getElementById('beta-value'),
	depthValue = document.getElementById('depth-value');
function showValues() {
	alphaValue.innerHTML = chart.options.chart.options3d.alpha;
	betaValue.innerHTML = chart.options.chart.options3d.beta;
	depthValue.innerHTML = chart.options.chart.options3d.depth;
}
//监听 sliders 的变化并更新图表
$('#sliders input').on('input change', function () {
	chart.options.chart.options3d[this.id] = this.value;
	showValues();
	chart.redraw(false);
});
showValues();

	<div id="container"></div>
	<div id="sliders">
		<table>
			<tr>
				<td>α 角（内旋转角）</td>
				<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
			</tr>
			<tr>
				<td>β 角（外旋转角）</td>
				<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
			</tr>
			<tr>
				<td>深度</td>
				<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
			</tr>
		</table>
	</div>

{"resource":"https://code.highcharts.com.cn/jquery/jquery-1.8.3.min.js,http://cdn.highcharts.com.cn/highstock/highstock.js,http://cdn.hcharts.cn/highcharts/highcharts-3d.js,http://cdn.hcharts.cn/highcharts/modules/exporting.js,http://cdn.hcharts.cn/highcharts/modules/drilldown.js,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"YhGy7a","name":"x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻","version":0,"doctype":0,"description":"x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻","meta":"","newGroup":2260,"group":{"id":2260,"name":"临时分组","code":"temp"}}}

代码信息

保存到分组

外部资源 $[libs.length]

添加新的资源

快捷键

全局快捷键

编辑器快捷键

关于

x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻 | JShare

x轴多了之后，点击下钻再返回x轴错位，同时点击图不能再下钻

模板（查看所有模板）

外部资源
$[libs.length]