根据已知数据生成柱状图（自定义柱状图）

最新推荐文章于 2025-03-01 19:43:51 发布

himushroom

最新推荐文章于 2025-03-01 19:43:51 发布

阅读量2.4k

点赞数 1

分类专栏：记录文章标签： html css3动画柱状图数据 js

本文链接：https://blog.youkuaiyun.com/qq_26905989/article/details/61378887

版权

记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何仅使用HTML和CSS实现一个响应式的柱状图表。通过设置柱状图的高度为百分比值，可以使其根据外部容器的尺寸变化而自适应调整。文章提供了完整的代码示例，并解释了关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如有错误，还望指出~~

一、效果

这里写图片描述

二、说明

需要注意的是外层一定要设置高宽，因为柱状图是根据百分比来生成的
因为是百分比，所以会自适应屏幕
柱型的多少根据arr.length来做的判断
每个柱状的颜色，效果都可以在js里面做调整
恩，上面都在说废话

三、代码

html:

<body>
    <div class="box">
        <div class="main">
        // 这里的span标签最好还是根据arr.length用js来动态生成
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <div class="mask">
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    </div>
<body>

.box{
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.main{
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 95%;
    height: 400px;
    margin: 0 auto;
    font-size: 0;
    padding: 0;
}

.main span {
    width:4%;
    height: 0;
    border-right: 4px solid;
    transition: height 1s ease-in-out;
}

/*.mask{
    position: absolute;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: -1
}
.mask i {
    display: inline-block;
    height: 100%;
    opacity: .5;
}

.mask i:nth-child(1) {
    background-color: #ccc;
}
.mask i:nth-child(2) {
    background-color: #999;
}
.mask i:nth-child(3) {
    background-color: #555;
}*/

$(document).ready(function () {
    // 此处为自定义的数据
    var arr = [20, 30, 40, 45, 60, 80, 90, 110, 150, 130, 70, 120, 140, 90, 70, 80, 50, 110, 140, 120, 60, 50, 40, 30, 20]
    var maxH = 0
    var line = $('.main span')
    var mask = $('.mask i')
    for (var i=0; i<arr.length; i++) {
        if (arr[i] > maxH) {
            maxH = arr[i];
        }
    }
    // react里面用map，参数是m在前i在后
    line.map(function(i, m){
        if (i<12){   
            $(m).css({'background-color': '#ccc','border-color': '#fff'})
            $(mask).eq(0).css('width', (12 * 4) + '%') 
        } else if (i<10) {
            $(m).css({'background-color': '#ccc','border-color': '#fff'})
            $(mask).eq(1).css('width', (10 * 4) + '%')
        } else {
            $(m).css({'background-color': '#ccc','border-color': '#fff'})
            $(mask).eq(2).css('width', (3 * 4) + '%')
        }

        var averH = arr[i] / maxH * 100 + '%'
        setTimeout(function() {
            $(m).css('height', averH)
        }, 500);
    })
})