javascript学习-svg绘制条形图

最新推荐文章于 2024-07-30 20:03:03 发布

加油吧qaq

最新推荐文章于 2024-07-30 20:03:03 发布

阅读量523

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107752990

版权

代码：
主要用来理解svg，不是重点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.axis{
				stroke: #999;
				stroke-width: 2px;
			}
		</style>
	</head>
	<body>
		<!-- 1获取数据
		2创建svg
		3创建坐标
		4绘制坐标
		5依据数据绘制矩形 -->
		<svg width="1000" height="700">
			<g id="zuobiao">
				<!-- x轴 -->
				<line class="axis" x1="50" y1="600" x2="950" y2="600"></line>
				<path d="M 925,590 L 950,600 L 925,610 Z"></path>
				<text x="900" y="630">时间</text>
				<!-- y轴 -->
				<line class="axis" x1="100" y1="650" x2="100" y2="50"></line>
				<path d="M 90,75 L 100,50 L 110,75 Z"></path>
				<text x="50" y="60">订单</text>
			</g>
			<g id="xkedu">
			     <!-- <line class="axis" x1="170" y1="600" x2="170" y2="580"></line> -->
			</g>
			<g id="ykedu">
			 
			</g>
			<g id="barList">		

			</g>
		</svg>
		<script type="text/javascript">
			var data=[{
				data:"星期一",
				order:"1000"
			},
			{
				data:"星期二",
				order:"500"
			},
			{
				data:"星期三",
				order:"600"
			},
			{
				data:"星期四",
				order:"1100"
			},
			{
				data:"星期五",
				order:"1500"
			},
			{
				data:"星期六",
				order:"1200"
			},
			{
				data:"星期天",
				order:"1300"
			}]
			console.log(data);
			var xkedu=document.querySelector("#xkedu")
			var ykedu=document.querySelector("#ykedu")
			var barListDom=document.querySelector("#barList")
			var length=700/data.length;
			var ylength=450/15;
			for(var i=1;i<=data.length;i++){
				renderkedu(i)
			}
			for(var i=1;i<=15;i++){
				ykedu.innerHTML=ykedu.innerHTML+`<line class="axis" x1="100" y1="${600-ylength*i}" x2="120" y2="${600-ylength*i}"></line>`
				+`<text x="50" y="${600-ylength*i}">${100*i}</text>`
			}
			function renderkedu(i){
				var lineDom=document.createElement("line");
				lineDom.className="axis";
				lineDom.setAttribute("x1",100+length*i)
				lineDom.setAttribute("y1","600")
				lineDom.setAttribute("x2",100+length*i)
				lineDom.setAttribute("y2","580")
				xkedu.innerHTML=xkedu.innerHTML+lineDom.outerHTML+`<text x="${75+length*i}" y="620">${data[i-1].data}</text>`;
				barListDom.innerHTML= barListDom.innerHTML+`<rect x="${75+length*i}" y="${600-(ylength*(data[i-1].order/100))}" width="50" height="${ylength*(data[i-1].order/100)}"></rect>`
			    console.log()
			}
			
		</script>
	</body>
</html>

结果：
在这里插入图片描述

加油吧qaq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript学习-svg绘制条形图

代码：主要用来理解svg，不是重点<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .axis{ stroke: #999; stroke-width: 2px; } </style> </head> <
复制链接

扫一扫