Highcharts 不同高度的3D饼图

先上效果：

完整代码如下（复制粘贴改id即可）：

// 修改3d饼图绘制过程
var each = Highcharts.each,
	round = Math.round,
	cos = Math.cos,
	sin = Math.sin,
	deg2rad = Math.deg2rad;
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
	proceed.apply(this, [].slice.call(arguments, 1));
	// Do not do this if the chart is not 3D
	if (!this.chart.is3d()) {
		return;
	}
	var series = this,
		chart = series.chart,
		options = chart.options,
		seriesOptions = series.options,
		depth = seriesOptions.depth || 0,
		options3d = options.chart.options3d,
		alpha = options3d.alpha,
		beta = options3d.beta,
		z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
	z += depth / 2;
	if (seriesOptions.grouping !== false) {
		z = 0;
	}
	each(series.data, function(point) {
		var shapeArgs = point.shapeArgs,
			angle;
		point.shapeType = 'arc3d';
		var ran = point.options.h;
		shapeArgs.z = z;
		shapeArgs.depth = depth * 0.75 + ran;
		shapeArgs.alpha = alpha;
		shapeArgs.beta = beta;
		shapeArgs.center = series.center;
		shapeArgs.ran = ran;
		angle = (shapeArgs.end + shapeArgs.start) / 2;
		point.slicedTranslation = {
			translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
			translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
		};
	});
});
(function(H) {
	H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
		// Run original proceed method
		var ret = proceed.apply(this, [].slice.call(arguments, 1));
		ret.zTop = (ret.zOut + 0.5) / 100;
		return ret;
	});
}(Highcharts));

// 生成不同高度的3d饼图
Highcharts.chart('container', {
	chart: {
		type: 'pie',
		animation: false,
		events: {
			load: function() {
				var each = Highcharts.each,
					points = this.series[0].points;
				each(points, function(p, i) {
					p.graphic.attr({
						translateY: -p.shapeArgs.ran
					});
					p.graphic.side1.attr({
						translateY: -p.shapeArgs.ran
					});
					p.graphic.side2.attr({
						translateY: -p.shapeArgs.ran
					});
				});
			}
		},
		options3d: {
			enabled: true,
			alpha: 75,
			beta: 0
		}
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			depth: 35,
			dataLabels: {
				enabled: false
			}
		}
	},
	series: [{
		type: 'pie',
		name: 'Browser share',
		data: [{
			'name': 'Firefox',
			y: 30.0,
			h: 50
		}, {
			name: 'IE',
			y: 26.8,
			h: 15
		}, {
			name: 'Chrome',
			y: 12.8,
			h: 20
		}, {
			'name': 'Safari',
			y: 8.5,
			h: 2
		}, {
			'name': 'Opera',
			y: 6.2,
			h: 15
		}, {
			'name': 'Others',
			y: 0.7,
			h: 30
		}]
	}]
});