【前端笔记】highcharts图表之3D饼图的设置

• 首先要在页面引进highcharts图表首先需要引进两个外部js

highcharts.js

highcharts-3d.js(如不需要3D饼图可以不引入这个js文件）

• 然后用div在页面给饼图创建一个空间

• 在页面内部js里写饼图的样式，或者写在外部js里引进来。

注意：因为js加载顺序问题（页面的加载顺序是从上至下的。所以一般外部引入js写在最上面。 页面里面的JS写在最下面。）如果把页面里的js放到了外部js文件里，为了它能读取到js文件，需要把引进的js文件放置在最下面。

如我把js样式放置在名为test的js文件里：

test.js:

var chart = Highcharts.chart('container', {
	//用于设置图表区相关属性
	chart: {
		//放置图表的div的id
		renderTo: 'container',
		type: 'pie',
		//背景设为透明
		backgroundColor: 'rgba(0,0,0,0)',
		options3d: {
			enabled: true,//是否显示3D样式
			//展示的角度
			alpha: 45,
			beta: 0
		}
	},
	//标题
	title: {
		text: '百度的用途',
		style:{  fontSize:'32px', color: ' #000000'}	
	},
	
	//鼠标放在饼图上显示的字
	tooltip: {
		pointFormat: '{series.name}: {point.percentage:.1f}%'//小数点保留位数
	},
	
	//设置图表的表现效果 设置该选项，会对整个图表生效。但是，如果你在series中单独又定制了相应的样式，那么plotOptions的设置将会被自定义的覆盖。 
	plotOptions: {
		pie: {
			//是否允许被点击，为true时点击饼图的一块
			allowPointSelect: true,
			//鼠标样式为小手
			cursor: 'pointer',
			//饼图的厚度
			depth: 100,
			
			dataLabels: {
				enabled: true,
				format: '{point.name}'
			}
		}
	},
	
	//改变饼图默认颜色
	colors:['#0DD9D4','#D62222','#95D94C'],
	
	// 禁用右下角版权信息
	credits: {
		enabled: false
	},
	
	//用于设置图表中要展示的数据相关的属性
	series: [{
		//显示类型
		type: 'pie',
		//饼图显示的数据
		name: '占比',
		data: [
		//显示的字和所占比例
			['测试网络是否连接正确', 70.0],
			['查找资讯',5.0],
			['懒得打网址直接搜网站的名字',25.0]
		]
	}]
});

以上注释为我用饼图时遇到的问题所找到的改变样式的方法，再遇到问题再行更新。