【HTML】简单实用：CSS+DIV绘制常见图表

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2023年7月26日 11:15 本文热度 474

提到绘制图表，大家可能想到ECharts，其实，一些简单的图表可以直接通过css+html实现，下面手把手带大家绘制，初学者也能轻松掌握。

1 css+html绘制柱形图

我们先写一个超简单的html文件。

<div class="bargraph">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

其中，最外层的div就是图表的背景板。内部的5个div是柱形图的5个柱形。

我们给最外层的div一个背景色和大小。

<div class="bargraph">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

请添加图片描述

另外，内部的div默认是纵向排列的，我们让它横向排列，肩并肩，并设立宽度和高度。
为了方便观察，这里先给它加一个背景色。

.bargraph {
    display: flex;
    justify-content:space-around
}
.bargraph div {
    background-color: bisque;
}
.bargraph div { 
    width: 30px;
    height: 100%;
}

在这里插入图片描述

这时候可以看到柱形图的轮廓了，接下来我们怎样设置柱形图百分比呢？
这里用到线性渐变。

.bargraph div:nth-child(1) { 
    background: linear-gradient(to bottom, transparent 30%, #62a8fb 30%, #62a8fb 60%, #5778d9 60%);
}

线性渐变linear-gradient内部第一个参数是方向，这里是从上到下。

后面的参数是颜色和颜色节点。
如果两个相邻的颜色节点之间，百分比相同，则颜色在该节点直接改变的，没有渐变效果。
如果两个相邻的颜色节点之间，百分比不同，则颜色在两个百分比节点之间渐变。

上面的代码对第一个内部div设置了渐变，从上到下，0%-30%透明，30%颜色变为#62a8fb，30%-60%颜色为#62a8fb，60%时颜色变为#5778d9。

在这里插入图片描述

使用线性渐变设置剩下的内部div。

.bargraph div:nth-child(2) { 
    background: linear-gradient(to bottom, transparent 74%, #62a8fb 74%, #62a8fb 89%, #5778d9 89%);
}
.bargraph div:nth-child(3) { 
    background: linear-gradient(to bottom, transparent 55%, #62a8fb 55%, #62a8fb 83%, #5778d9 83%);
}
.bargraph div:nth-child(4) { 
    background: linear-gradient(to bottom, transparent 65%, #62a8fb 65%, #62a8fb 83%, #5778d9 83%);
}
.bargraph div:nth-child(5) { 
    background: linear-gradient(to bottom, transparent 45%, #62a8fb 45%, #62a8fb 73%, #5778d9 73%);
}

在这里插入图片描述

2 css+html绘制饼图

绘制饼图就更加简单了。
这里也是使用渐变实现，不过是圆锥渐变。

还是先写一个超简单的html文件，简单到只有一行代码。

<div class="piegraph"></div>

我们将这个div设置为圆形：给它一个宽和高度再设置圆角。

为了方便观察，这里也给它加一个背景色。

body{
    background-color: #0f117c;
}
.piegraph { 
    width: 250px; 
    height: 250px; 
    border-radius: 50%; 
    background-color: antiquewhite;
}

在这里插入图片描述

制作饼图用到圆锥渐变，我们前面讲到线性渐变，是向一个方向成直线渐变。
而圆锥渐变的起始点是图沃行模缓笠运呈闭敕较蛉浦行氖迪纸ケ湫Ч�

由于方向固定(顺时针方向)，圆锥渐变省略了固定方向的参数。
圆锥渐变的参数组合和线性渐变类似，只是颜色后面不是百分比，而是角度。

代码如下：

.piegraph { 
    ...
    background: conic-gradient(#668fd5 30deg, #2dc2dc 30deg, #2dc2dc 65deg, #d4ec59 65deg, #d4ec59 110deg, #fcb74d 110deg, #fcb74d 200deg, #fde78d 200deg);
}

在这里插入图片描述

3 css+html绘制折现图

用 HTML 和 CSS 也可以实现折线图。
折线图的线由角度不同的线段拼接而成，我们可以通过高度很小的div元素来模拟线条。然后用 transform 改变角度和位置。

首先我们先画一条线段。

一个超简单的html。

<div class="bar">
    <div class="piegraph"></div>
</div>

定义这个线段的宽高和背景色。

body{
    background-color: #0f117c;
}
.piegraph { 
    width: 60px; 
    height: 3px;  
    background-color: #fcb74d;
}

在这里插入图片描述

我们可以通过transform: rotate()调整线段的角度，通过position调整线段的位置。

让不同角度的线段拼接起来形成折线图。

我们修改html，添加多个线段。

<div class="bar">
    <div class="piegraph"></div>
    <div class="piegraph"></div>
    <div class="piegraph"></div>
    <div class="piegraph"></div>
    <div class="piegraph"></div>
</div>

修改多个线段的角度,长度和位置。

.piegraph:nth-child(1) { 
    transform: rotate(-60deg);
}
.piegraph:nth-child(2){
    transform: rotate(2deg);
    position: relative;
    top: -23px;
    left: -17px;
    width: 60px;
}
.piegraph:nth-child(3){
    transform: rotate(-60deg);
    position: relative;
    top: -46px;
    left: -34px;
}
.piegraph:nth-child(4){
    transform: rotate(39deg);
    position: relative;
    top: -42px;
    left: -59px;
    width: 100px;
}
.piegraph:nth-child(5){
    transform: rotate(2deg);
    position: relative;
    top: -10px;
    left: -71px;
    width: 80px;
}
.bar {
    display: flex;
    margin: 200px;
}
</style>

在这里插入图片描述

该文章在 2023/7/26 11:25:31 编辑过

关键字查询

html

css

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。