利用js制作柱状图

�落霞孤鹜�

已于 2023-10-10 11:54:10 修改

阅读量514

点赞数 1

文章标签： javascript 开发语言 css

于 2023-10-10 11:51:47 首次发布

本文链接：https://blog.csdn.net/qq_66442729/article/details/133740461

版权

柱状图一般是由Excel表格生成比较方便，其实css也可以制作柱状图，但是会比较麻烦。这里我们只是为了方便理解css盒子模型的各项功能来做的一个案例

主体部分可以这么设置，设置一个大的盒子模型，然后设置四个小盒子作为柱状图实体

<body>
    <div class="box">
        <div id="column" >
            <span>100</span>
            <h1>第一季度</h1>
        </div>

        <div id="column" >
            <span>200</span>
            <h1>第二季度</h1>
        </div>
        <div id="column" >
            <span>300</span>
            <h1>第三季度</h1>
        </div>
        <div id="column" >
            <span>400</span>
            <h1>第四季度</h1>
        </div>
    </div>

一、设置坐标系

直接设置一个大的盒子模型，显示左边框和下边框就可以出现直角坐标系

下面是css部分

.box {
           /* 设置直角坐标的大小和宽度 */
            height: 25rem;
            width: 37.5rem;

            /* 设置显示盒子的左边距和下边距 */
            display: flex;
            border-left: .0625rem solid black;
            border-bottom: .0625rem solid black;

            /* 让柱状图能够均匀分布 */
            justify-content: space-around;
            align-items: flex-end;

            /* 调整盒子位置 */
            margin: auto;
            margin-top: 20px;
            padding: 0;
            
        }

二、设置柱状图

因为div盒子一般都是横向增减的，所以我们应当将盒子的主轴换成纵向

.box>div {
            /* 设置柱的宽度和背景颜色 */
            width: 6.25rem;
            background-color: pink;

            /* 调整排列，将div由横向换为纵向 */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            

        }

三、设置自变量名位置和数据名位置

可以利用margin来调节位置

span {
            /* 调整数据显示的位置 */
            width: 6.25rem;
            /* mrgin调整为负值可以让数据显示在数据柱的上方 */
            margin-top: -1.25rem;
            text-align: center;
        }

        .box>div h1 {
            /* 让数据类型描述显示在下方 */
            margin-bottom: -6.25rem;
        }

之后的成品：

�落霞孤鹜�

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
利用js制作柱状图

柱状图一般是由Excel表格生成比较方便，其实css也可以制作柱状图，但是会比较麻烦。这里我们只是为了方便理解css盒子模型的各项功能来做的一个案例主体部分可以这么设置，设置一个大的盒子模型，然后设置四个小盒子作为柱状图实体。
复制链接

扫一扫