Web column chart

Welcome to the "Good-looking Blog Nobody Likes" series

This blog will make a column chart style for all judges.

First show a wave of renderings to increase your interest:

No other jar packages are used here, but css is used to draw it, that is to say, the chart is made by positioning.

Let’s analyze how a wave of column charts are composed: as shown in the figure above, the left side is the ul vertical style, and the bottom is the ul horizontal style. The dotted grid in the figure is made up of 6 divs, from top to bottom. The first 5 div attributes are: border dashed line, the size is the same, and the bottom border is hidden; the bottom div attribute: only the upper border is displayed, long and full, and the border is dashed; and the column in the figure is also positioned by 5 divs. , The length is the same, the height is 0px, the specific height is realized by js, and there are specific values above the pillars, which are added by the innerHTML method of js.

The specific code is as follows:

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/rdm.css" />
	</head>
	<body>
		<div id="all" class="all">
			<h1>博客测试柱形图</h1>
			<div class="h2">
				<ul>
					<li>...</li>
					<li>20</li>
					<li>15</li>
					<li>10</li>
					<li>5</li>
					<li>0(元)</li>
				</ul>
			</div>
			<div class="h"></div>
			<div class="h"></div>
			<div class="h"></div>
			<div class="h"></div>
			<div class="h"></div>
			<div class="h1"></div>
			<div class="h3">
				<ul>
					<li>(班级)1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
			<div id="w1" class="w1">
				<span id="w11" class="ws"></span>
			</div>
			<div id="w2" class="w2">
				<span id="w12" class="ws"></span>
			</div>
			<div id="w3" class="w3">
				<span id="w13" class="ws"></span>
			</div>
			<div id="w4" class="w4">
				<span id="w14" class="ws"></span>
			</div>
			<div id="w5" class="w5">
				<span id="w15" class="ws"></span>
			</div>
		</div>
		<script src="js/rdm.js"></script>
	</body>
</html>

CSS:

*{
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
body{
	background-color: pink;
}
.all{
	width: 500px;
	height: 400px;
	margin: auto;
	background-color: white;
}
.back{
	width: 400px;
}
h1{
	text-align: center;
	margin-top: 10vh;
}
.h{
	width: 90%;
	height: 40px;
	border-left: 1px dashed black;
	border-top:  0.5px dashed gray;
	position: relative;
	top: 29%;
	left: 10%;
}
.h1{
	width: 100%;
	border-top:  0.5px dashed gray;
	position: relative;
	top: 29%;
}
.h2{
	position: absolute;
	top: 210px;
	left: 545px;
	line-height: 5.5vh;
}
.h3 ul{
	display: flex;
	position: absolute;
	top: 420px;
	left: 580px;
}
.h3 li{
	padding: 30px;
}
.w1{
	background-color: orange;
	width: 50px;
	position: absolute;
	left:630px;
	top: 437px;
	transform-origin: top;
	transform: rotateX(180deg);
}
.w2{
	background-color: gold;
	width: 50px;
	position: absolute;
	left:700px;
	top: 437px;
	transform-origin: top;
	transform: rotateX(180deg);
}
.w3{
	background-color: yellow;
	width: 50px;
	position: absolute;
	left:770px;
	top: 437px;
	transform-origin: top;
	transform: rotateX(180deg);
}
.w4{
	background-color: red;
	width: 50px;
	position: absolute;
	left:840px;
	top: 437px;
	transform-origin: top;
	transform: rotateX(180deg);
}
.w5{
	background-color: orange;
	width: 50px;
	position: absolute;
	left:910px;
	top: 437px;
	transform-origin: top;
	transform: rotateX(180deg);
}
.ws{
	position: absolute;
	transform: rotateY(100deg);
	left: 15px;
}

JS:

var num1 = 21;
var num2 = 10;
var num3 = 15;
var num4 = 8;
var num5 = 5;
document.getElementById("w1").style.height=8*num1+0.5*num1/5+"px";
document.getElementById("w2").style.height=8*num2+0.5*num2/5+"px";
document.getElementById("w3").style.height=8*num3+0.5*num3/5+"px";
document.getElementById("w4").style.height=8*num4+0.5*num4/5+"px";
document.getElementById("w5").style.height=8*num5+0.5*num5/5+"px";
document.getElementById("w11").innerHTML=num1;
document.getElementById("w11").style.transform="rotateX(180deg)";
document.getElementById("w11").style.top=8*num1+"px";
document.getElementById("w12").innerHTML=num2;
document.getElementById("w12").style.transform="rotateX(180deg)";
document.getElementById("w12").style.top=8*num2+"px";
document.getElementById("w13").innerHTML=num3;
document.getElementById("w13").style.transform="rotateX(180deg)";
document.getElementById("w13").style.top=8*num3+"px";
document.getElementById("w14").innerHTML=num4;
document.getElementById("w14").style.transform="rotateX(180deg)";
document.getElementById("w14").style.top=8*num4+"px";
document.getElementById("w15").innerHTML=num5;
document.getElementById("w15").style.transform="rotateX(180deg)";
document.getElementById("w15").style.top=8*num5+"px";

The data in the chart can be modified by yourself, here is to provide an idea and a model.

This blog post ends here, it's not easy to make, everyone tells me a little like.

Welcome to the "Good-looking Blog Nobody Likes" series

First show a wave of renderings to increase your interest:

The specific code is as follows:

HTML：

CSS:

JS:

Guess you like