Chart.js图表使用

最新推荐文章于 2024-05-31 16:59:51 发布

96胖子

最新推荐文章于 2024-05-31 16:59:51 发布

阅读量131

点赞数

分类专栏：前端文章标签：前端图表

本文链接：https://blog.csdn.net/m0_37921689/article/details/103114579

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个很方便

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/Chart.min.js"></script>
	</head>

	<body>

		<h1>每月销售记录</h1>
		<canvas id="myChart_bar" width="400" height="400"></canvas>
		<script>
			var ctx = document.getElementById("myChart_bar");
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
					datasets: [{
						label:'每月销售记录',
						data: [12, 19, 3, 5, 2, 3, 4, 5, 6, 6, 6, 8],
						backgroundColor: [
							'rgba(255, 99, 132, 0.2)',
							'rgba(54, 162, 235, 0.2)',
							'rgba(255, 206, 86, 0.2)',
							'rgba(75, 192, 192, 0.2)',
							'rgba(153, 102, 255, 0.2)',
							'rgba(255, 159, 64, 0.2)',
							'rgba(245, 189, 12, 0.2)',
							'rgba(150, 159, 200, 0.2)',
							'rgba(150, 60, 10, 0.2)',
							'rgba(150, 60, 60, 0.2)',
							'rgba(235, 60, 180, 0.2)',
							'rgba(235, 180, 180, 0.2)',
						],

						borderWidth: 1
					}]
				},
				options: {
					scales: {
						yAxes: [{
							ticks: {
								beginAtZero: true
							}
						}]
					}
				}
			});
		</script>

		<h1>记录销售占比</h1>
		<canvas id="myChart_pie" width="400" height="400"></canvas>

		<script>
			var ctx = document.getElementById('myChart_pie').getContext('2d');
			var data = {
				datasets: [{
					data: [10, 20, 30, 15], //在这里写数据
					backgroundColor: ["red", "green", "blue", "gray"] //在这里指定颜色
				}],

				labels: [ //这里写标签，即每个数据属于哪个种类
					'一季度',
					'二季度',
					'三季度',
					'四季度'
				]
			};

			var myPieChart = new Chart(ctx, {
				type: 'pie',
				data: data
			});
		</script>
	</body>

</html>

96胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Chart.js图表使用

这个很方便<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/Chart.min.js"></script> </...
复制链接

扫一扫