超级碰在线视频,亚洲色多多视频一区二区 ,丰满少妇被猛烈进入高淸播放 ,欧美日屁视频,日本亚洲欧美多野无卡一二三区 ,国产精品你懂的在线播放,色777亚洲综合电影,野花视频www在线观看免费,亚洲五月激情综合图片区,最新午夜福利在线观看网

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

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

admin

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

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

1 css+html繪制柱形圖

我們先寫一個超簡單的html文件。

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

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

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

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

請?zhí)砑訄D片描述

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

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

在這里插入圖片描述

這時候可以看到柱形圖的輪廓了，接下來我們怎樣設(shè)置柱形圖百分比呢？
這里用到線性漸變。

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

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

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

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

在這里插入圖片描述

使用線性漸變設(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繪制餅圖

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

還是先寫一個超簡單的html文件，簡單到只有一行代碼。

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

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

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

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

在這里插入圖片描述

制作餅圖用到圓錐漸變，我們前面講到線性漸變，是向一個方向成直線漸變。
而圓錐漸變的起始點(diǎn)是圖沃行?，染忬疫\(yùn)呈閉敕較蛉浦行氖迪紙ケ湫Ч�

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

代碼如下：

.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)折線圖。
折線圖的線由角度不同的線段拼接而成，我們可以通過高度很小的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()調(diào)整線段的角度，通過position調(diào)整線段的位置。

讓不同角度的線段拼接起來形成折線圖。

我們修改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 編輯過

關(guān)鍵字查詢

html

css

相關(guān)文章

正在查詢...

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

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

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

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