HighChart实现3D的饼状图

951 阅读1分钟

HighChart是一个非常优秀的前端图表框架,当然Echarts在图表方面现在还是王者,但确实有些图表Echarts,很难实现,或不能实现,比如,3D的饼状图,在Echarts找不到解决方案,但HighChart却可以实现。

1. 准备工作

引入HighChart和highChart-3D的JS文件。

<script src="js/highcharts.src.js"></script>
<script src="js/highcharts-3d.src.js"></script>

2. 完整代码

var chart = Highcharts.chart('container', {
	chart: {
		type: 'pie',
		options3d: {
			enabled: true,
			alpha: 45,
			beta: 0
		}
	},
	title: {
		text: '2014年某网站不同浏览器访问量占比'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			depth: 35,
			dataLabels: {
				enabled: true,
				format: '{point.name}'
			}
		}
	},
	series: [{
		type: 'pie',
		name: '浏览器占比',
		data: [
			['Firefox',   45.0],
			['IE',       26.8],
			{
				name: 'Chrome',
				y: 12.8,
				sliced: true,
				selected: true
			},
			['Safari',    8.5],
			['Opera',     6.2],
			['Others',   0.7]
		]
	}]
});