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

最新推荐文章于 2024-09-21 22:06:07 发布

我还没秃我还能学！

最新推荐文章于 2024-09-21 22:06:07 发布

阅读量3.7k

点赞数

分类专栏：笔记前端文章标签： highcharts js

本文链接：https://blog.youkuaiyun.com/weixin_43068329/article/details/100015555

版权

笔记同时被 2 个专栏收录

16 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

本文介绍了如何在前端使用Highcharts创建3D饼图。首先需要引入highcharts.js和highcharts-3d.js库，然后在HTML中创建一个div作为图表容器。样式配置可以通过内部或外部JS实现，注意JS加载顺序。遇到问题时，可以在外部JS文件中调整样式，确保文件引用正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

highcharts.js

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>3D饼图</title>
		<script type="text/javascript" src="js/highcharts.js"></script>
		<script type="text/javascript" src="js/highcharts-3d.js"></script>
	</head>
	<body>
		<div id="container" 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/highcharts.js"></script>
		<script type="text/javascript" src="js/highcharts-3d.js"></script>
	</head>
	<body>
		<div id="container" style="height: 400px; height: 600px;"></div>
	</body>
	<script type="text/javascript" src="js/test.js"></script>
</html>

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}: <b>{point.percentage:.1f}%</b>'//小数点保留位数
	},
	
	//设置图表的表现效果 设置该选项，会对整个图表生效。但是，如果你在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]
		]
	}]
});

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