全国服务热线:4008-888-888

技术知识

css用Flex合理布局制做简单柱状图的完成

下列是1个用Flex合理布局的柱状图:

HTML:

<div class="his_box">
    <div>考试成绩遍布直方图</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{ /*盒子*/
            width: 400px;
            height: 220px;
            border: solid 1px #1E90FF;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .histogram{ /*直方图*/
            display: flex;
        }
        .histogram>div{ /*1条图块*/
            width: 30px;
            height: 200px; /*100%时的块高宽比*/
            font-size: 14px;
            text-align: center;
            margin-right: 5px;
            display: flex;
            flex-direction: column-reverse;
        }
        .histogram>div:nth-child(3n) div{ /*图块色调*/
            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为100%,50%便是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*/
        }

本例中,图块的最高点为20,每条柱子的高宽比按占比界定:第1条数据信息为10,高宽比是50%;第2条数据信息为8,高宽比为40%,以此类推。

图块色调选用3色循环系统应用。

合理布局时,最外层器皿应用了align-items: center;使器皿内元素总体垂直居中。

直方图控制模块应用了display: flex;让控制模块中的柱子横向排序。

每条柱子也是flex控制模块,但它的合理布局方位是纵向的,且方位是从下到上的 flex-direction: column-reverse;

假如想做成纵向排序的直方图:

CSS:

.his_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{ /*直方图*/
            display: flex;
            flex-direction: column;
        }
        .histogram>div{ /*1条图块*/
            height: 30px;
            width: 200px; /*100%时的块宽度*/
            line-height: 30px;
            font-size: 14px;
            text-align: right;
            margin-bottom: 5px;
            display: flex;
        }
        .histogram>div:nth-child(3n) div{ /*图块色调*/
            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为100%,50%便是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*/
        }

到此这篇有关css用Flex合理布局制做简单柱状图的完成的文章内容就详细介绍到这了,更多有关css柱状图內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服