基于原生JS的柱状图

最新推荐文章于 2025-06-18 18:02:55 发布

sayJS_wang

最新推荐文章于 2025-06-18 18:02:55 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：原生JS

本文链接：https://blog.youkuaiyun.com/Say_wind/article/details/80829271

这篇博客展示了如何利用纯JavaScript实现一个柱状图。通过设置CSS样式和JavaScript动态加载数据，创建了包含左侧数据、底部数据和柱状部分的图表。柱状的高度根据给定的数据动态调整，并在顶部显示相应的数值。

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

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
        body{background-color: #c0c0c0;}
        .figure{width:900px;height: 500px;margin: 0 auto;padding: 30px 0;background-color: #ffffff;}
        ul{list-style: none;padding: 0;margin: 0;}
        .figure-line{width: 700px;height: 420px;float: left;border: 1px solid #c0c0c0;border-right: 0;position: relative;}
        .figure-left{width: 100px;height: 420px;float: left;}
        .figure-left ul{margin-top: 30px ;}
        .figure-left ul li{height: 60px;text-align: right;line-height: 60px;padding: 0 5px;}
        .figure-line ul.fr li{border-top:1px solid #c0c0c0;height: 60px;}
        .figure-line ul.fr li:first-child{border: 0;}
        .figure-line ul.ls{width: 700px;height: 420px;position: absolute;bottom: -1px;}
        .figure-line ul.ls li{float: left;display: block;width: 60px;margin:0 20px;background-color: blue;position: relative;bottom: 0;}
        .figur