本文实例为大家分享了Highcharts实现不同高度的3D环形图的具体代码,供大家参考,具体内容如下
要实现的效果:
完整代码如下:
// 修改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, } }, title: { text: 'XXXXXXXXXXX' }, subtitle: { text: 'Highcharts 中的3D圆环图' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, innerSize: 180, 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 }] }] });
<div id="container" style="height: 400px"></div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。