*{-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
基于原生JS的柱状图
最新推荐文章于 2024-08-09 07:06:50 发布
这篇博客展示了如何利用纯JavaScript实现一个柱状图。通过设置CSS样式和JavaScript动态加载数据,创建了包含左侧数据、底部数据和柱状部分的图表。柱状的高度根据给定的数据动态调整,并在顶部显示相应的数值。
摘要由CSDN通过智能技术生成