差差漫画登录页面弹窗有视频,色王朝,松岛枫1080p

【HTML】簡(jiǎn)單實(shí)用：CSS+DIV繪制常見(jiàn)圖表

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年7月26日 11:15 本文熱度 604

提到繪制圖表，大家可能想到ECharts，其實(shí)，一些簡(jiǎn)單的圖表可以直接通過(guò)css+html實(shí)現(xiàn)，下面手把手帶大家繪制，初學(xué)者也能輕松掌握。

1 css+html繪制柱形圖

我們先寫(xiě)一個(gè)超簡(jiǎn)單的html文件。

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

其中，最外層的div就是圖表的背景板。內(nèi)部的5個(gè)div是柱形圖的5個(gè)柱形。

我們給最外層的div一個(gè)背景色和大小。

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

請(qǐng)?zhí)砑訄D片描述

另外，內(nèi)部的div默認(rèn)是縱向排列的，我們讓它橫向排列，肩并肩，并設(shè)立寬度和高度。
為了方便觀察，這里先給它加一個(gè)背景色。

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

在這里插入圖片描述

這時(shí)候可以看到柱形圖的輪廓了，接下來(lái)我們?cè)鯓釉O(shè)置柱形圖百分比呢？
這里用到線(xiàn)性漸變。

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

線(xiàn)性漸變linear-gradient內(nèi)部第一個(gè)參數(shù)是方向，這里是從上到下。

后面的參數(shù)是顏色和顏色節(jié)點(diǎn)。
如果兩個(gè)相鄰的顏色節(jié)點(diǎn)之間，百分比相同，則顏色在該節(jié)點(diǎn)直接改變的，沒(méi)有漸變效果。
如果兩個(gè)相鄰的顏色節(jié)點(diǎn)之間，百分比不同，則顏色在兩個(gè)百分比節(jié)點(diǎn)之間漸變。

上面的代碼對(duì)第一個(gè)內(nèi)部div設(shè)置了漸變，從上到下，0%-30%透明，30%顏色變?yōu)?62a8fb，30%-60%顏色為#62a8fb，60%時(shí)顏色變?yōu)?5778d9。

在這里插入圖片描述

使用線(xiàn)性漸變?cè)O(shè)置剩下的內(nèi)部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繪制餅圖

繪制餅圖就更加簡(jiǎn)單了。
這里也是使用漸變實(shí)現(xiàn)，不過(guò)是圓錐漸變。

還是先寫(xiě)一個(gè)超簡(jiǎn)單的html文件，簡(jiǎn)單到只有一行代碼。

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

我們將這個(gè)div設(shè)置為圓形：給它一個(gè)寬和高度再設(shè)置圓角。

為了方便觀察，這里也給它加一個(gè)背景色。

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

在這里插入圖片描述

制作餅圖用到圓錐漸變，我們前面講到線(xiàn)性漸變，是向一個(gè)方向成直線(xiàn)漸變。
而圓錐漸變的起始點(diǎn)是圖沃行模緩笠運(yùn)呈閉敕較蛉浦行氖迪紙ケ湫Ч�

由于方向固定(順時(shí)針?lè)较?，圓錐漸變省略了固定方向的參數(shù)。
圓錐漸變的參數(shù)組合和線(xiàn)性漸變類(lèi)似，只是顏色后面不是百分比，而是角度。

代碼如下：

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

在這里插入圖片描述

3 css+html繪制折現(xiàn)圖

用 HTML 和 CSS 也可以實(shí)現(xiàn)折線(xiàn)圖。
折線(xiàn)圖的線(xiàn)由角度不同的線(xiàn)段拼接而成，我們可以通過(guò)高度很小的div元素來(lái)模擬線(xiàn)條。然后用 transform 改變角度和位置。

首先我們先畫(huà)一條線(xiàn)段。

一個(gè)超簡(jiǎn)單的html。

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

定義這個(gè)線(xiàn)段的寬高和背景色。

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

在這里插入圖片描述

我們可以通過(guò)transform: rotate()調(diào)整線(xiàn)段的角度，通過(guò)position調(diào)整線(xiàn)段的位置。

讓不同角度的線(xiàn)段拼接起來(lái)形成折線(xiàn)圖。

我們修改html，添加多個(gè)線(xiàn)段。

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

修改多個(gè)線(xiàn)段的角度,長(zhǎng)度和位置。

.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 編輯過(guò)

關(guān)鍵字查詢(xún)

html

css

相關(guān)文章

正在查詢(xún)...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專(zhuān)業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶(hù)的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

【HTML】簡(jiǎn)單實(shí)用：CSS+DIV繪制常見(jiàn)圖表

1 css+html繪制柱形圖

2 css+html繪制餅圖

3 css+html繪制折現(xiàn)圖