chart.js雷达图

最新推荐文章于 2021-09-25 00:23:53 发布

初晨未凉

最新推荐文章于 2021-09-25 00:23:53 发布

阅读量434

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/111466248

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
		<title></title>
	</head>
	<body>
		<canvas id="myChart" width="400" height="400"></canvas>
		<script>
			var ctx1 = document.getElementById("myChart").getContext("2d");
			var myChart = new Chart(ctx1, {
				
				type: 'radar',
				data: {
					
					labels: ['自我情绪认识', '情绪调控', '自我激励', '他人情绪认知', '人际关系'],
					
					datasets: [{
						data: [100, 110, 120, 70, 140, 10],
						pointBackgroundColor: '#16A085',//小圆点的颜色
						pointBorderColor: '#fff',//小圆点边框
						backgroundColor: 'rgba(190, 230, 253, 0.5)',
						borderColor: '#16A085',//线条的颜色，也就是边框
						borderWidth: 2,//小圆点大小
					}],

				},
				options: {
					 	legend: {
					 		display: false,//不显示图例
					 	},
					 	scale: {
					 		ticks: {
					 			display: false,//不显示纵坐标上面的数据
					 			stepSize: 5, //网格线间距步长
					 		},
					 		pointLabels: {
								fontSize: 14,//雷达图中坐标字体大小
							}
					 	}
				}
			});
		</script>
	</body>
</html>

初晨未凉

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chart.js雷达图

<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https:/
复制链接

扫一扫