WEB视频自适应 Eclipse插件 laravel grails vue动态绑定class 后台模板下载 swift视频教程 jquery循环 大数据项目开发案例 axure组件库下载 svn默认安装路径 html好看的字体 webapp打包 linux管道符 kubernetes官网 python for循环 python逻辑运算符 pythonassert函数 python生成随机数 python自学教程 python高级 python教程推荐 java运算符 java的数据类型 java中的string java操作数据库 java获取当前日期 linux内核编程 sql语句大全实例教程 javascript基础 网络电视软件下载 subscribe 为什么英雄联盟无法连接服务器 qq钱包实名认证 语音分析软件 视频后期处理软件 小米8游戏模式 pr书写效果 oledbconnection 鬼灵战马
当前位置: 首页 > 学习教程  > 编程语言

Highcharts 不同高度的3D饼图

2020/11/24 10:03:48 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

先上效果: 完整代码如下(复制粘贴改id即可): // 修改3d饼图绘制过程 var each Highcharts.each,round Math.round,cos Math.cos,sin Math.sin,deg2rad Math.deg2rad; Highcharts.wrap(Highcharts.seriesTypes.pie.protot…

先上效果:
在这里插入图片描述

完整代码如下(复制粘贴改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
		}]
	}]
});

本文链接: http://www.dtmao.cc/news_show_400219.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?