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

时间：2025-05-09 10:32:48
  • 首先要在页面引进highcharts图表首先需要引进两个外部js

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

  • 然后用div在页面给饼图创建一个空间
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D饼图</title>
		<script type="text/javascript" src="js/"></script>
		<script type="text/javascript" src="js/"></script>
	</head>
	<body>
		<div  style="height: 400px; height: 600px;"></div>
	</body>	
</html>
  • 在页面内部js里写饼图的样式，或者写在外部js里引进来。

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/"></script>
		<script type="text/javascript" src="js/"></script>
	</head>
	<body>
		<div  style="height: 400px; height: 600px;"></div>
	</body>
	<script type="text/javascript" src="js/"></script>
</html>

:

var 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: '{}: <b>{:.1f}%</b>'//小数点保留位数
	},
	
	//设置图表的表现效果 设置该选项，会对整个图表生效。但是，如果你在series中单独又定制了相应的样式，那么plotOptions的设置将会被自定义的覆盖。 
	plotOptions: {
		pie: {
			//是否允许被点击，为true时点击饼图的一块
			allowPointSelect: true,
			//鼠标样式为小手
			cursor: 'pointer',
			//饼图的厚度
			depth: 100,
			
			dataLabels: {
				enabled: true,
				format: '{}'
			}
		}
	},
	
	//改变饼图默认颜色
	colors:['#0DD9D4','#D62222','#95D94C'],
	
	// 禁用右下角版权信息
	credits: {
		enabled: false
	},
	
	//用于设置图表中要展示的数据相关的属性
	series: [{
		//显示类型
		type: 'pie',
		//饼图显示的数据
		name: '占比',
		data: [
		//显示的字和所占比例
			['测试网络是否连接正确', 70.0],
			['查找资讯',5.0],
			['懒得打网址直接搜网站的名字',25.0]
		]
	}]
});

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

相关文章