How to create a simple column chart using Flex layout in css
|
The following is a bar chart using Flex layout:
HTML:
<div class="his_box">
<div>Score distribution histogram</div>
<div class="histogram">
<div><div>10</div></div>
<div><div>8</div></div>
<div><div>15</div></div>
<div><div>12</div></div>
<div><div>5</div></div>
</div>
</div>CSS:
.his_box{ /*box*/
width: 400px;
height: 220px;
border: solid 1px #1E90FF;
display: flex;
flex-direction: column;
align-items: center;
}
.histogram{ /*histogram*/
display: flex;
}
.histogram>div{ /*a tile*/
width: 30px;
height: 200px; /*Block height at 100%*/
font-size: 14px;
text-align: center;
margin-right: 5px;
display: flex;
flex-direction: column-reverse;
}
.histogram>div:nth-child(3n) div{ /*tile color*/
background-color: #ff404b;
}
.histogram>div:nth-child(3n+1)div{
background-color: #99CCFF;
}
.histogram>div:nth-child(3n+2)div{
background-color: #F0AD4E;
}
.histogram>div:nth-child(1)div{
flex: 0 0 50%; /*20 is 100%, 50% is 10*/
}
.histogram>div:nth-child(2)div{
flex: 0 0 40%; /*8/20*/
}
.histogram>div:nth-child(3)div{
flex: 0 0 75%; /*15/20*/
}
.histogram>div:nth-child(4)div{
flex: 0 0 60%; /*12/20*/
}
.histogram>div:nth-child(5)div{
flex: 0 0 25%; /*5/20*/
}In this example, the highest point of the tile is 20, and the height of each column is defined proportionally: the first data is 10, and the height is 50%; the second data is 8, and the height is 40%, and so on. The tile colors are cycled through 3 colors. During layout, the outermost container uses align-items: center; to center the elements within the container as a whole. The histogram module uses display: flex; to arrange the columns in the module horizontally. Each column is also a flex module, but its layout direction is vertical, and the direction is from bottom to top flex-direction: column-reverse; If you want to make a vertically arranged histogram:
CSS:
.his_box{ /*box*/
width: 400px;
height: 220px;
border: solid 1px #1E90FF;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.his_box>div{
text-align: center;
}
.histogram{ /*histogram*/
display: flex;
flex-direction: column;
}
.histogram>div{ /*a tile*/
height: 30px;
width: 200px; /*Block width at 100%*/
line-height: 30px;
font-size: 14px;
text-align: right;
margin-bottom: 5px;
display: flex;
}
.histogram>div:nth-child(3n) div{ /*tile color*/
background-color: #ff404b;
}
.histogram>div:nth-child(3n+1)div{
background-color: #99CCFF;
}
.histogram>div:nth-child(3n+2)div{
background-color: #F0AD4E;
}
.histogram>div:nth-child(1)div{
flex: 0 0 50%; /*20 is 100%, 50% is 10*/
}
.histogram>div:nth-child(2)div{
flex: 0 0 40%; /*8/20*/
}
.histogram>div:nth-child(3)div{
flex: 0 0 75%; /*15/20*/
}
.histogram>div:nth-child(4)div{
flex: 0 0 60%; /*12/20*/
}
.histogram>div:nth-child(5)div{
flex: 0 0 25%; /*5/20*/
}This is the end of this article about how to use CSS to create a simple bar chart with Flex layout. For more relevant CSS bar chart content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: 2 methods and precautions for adding scripts in HTML
>>: How to modify the scroll bar style in Vue
Recommend
Chrome plugin (extension) development guide (complete demo)
Table of contents Written in front Preface What i...
Tutorial on installing GreasyFork js script on mobile phone
Table of contents Preface 1. Iceraven Browser (Fi...
HTML optimization techniques you must know
To improve the performance of web pages, many dev...
Linux general java program startup script code example
Although the frequency of starting the shell is v...
Ubuntu 16.04 kernel upgrade steps
1. Environment Ubuntu 16.04 running on a virtual ...
Comparison of storage engines supported by MySQL database
Table of contents Storage Engine Storage engines ...
Solve the problem of managing containers with Docker Compose
In Docker's design, a container runs only one...
How to configure multiple tomcats with Nginx load balancing under Linux
The methods of installing nginx and multiple tomc...
Solve the Linux Tensorflow2.0 installation problem
conda update conda pip install tf-nightly-gpu-2.0...
CSS3 to achieve dynamic background gradient effect
Learning CSS3 is more about getting familiar with...
Method of building docker private warehouse based on Harbor
Table of contents 1. Introduction to Harbor 1. Ha...
How to use domestic image warehouse for Docker
1. Problem description Due to some reasons, the d...
Sharing of SQL optimization experience when offset is too large during MySQL paging
Find the problem When we display the contents in ...
CSS tips for implementing Chrome tab bar
This time let’s look at a navigation bar layout w...
Docker container explains in detail how to simplify the image and reduce the size
Table of contents 1. Reduce the number of image l...