欧美性色片,视频区图片区小说区,亚洲欧美国产日产综合不卡

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

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

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

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

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默認是縱向排列的，我們讓它橫向排列，肩并肩，并設立寬度和高度。
為了方便觀察，這里先給它加一個背景色。

.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內(nèi)部第一個參數(shù)是方向，這里是從上到下。

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

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

在這里插入圖片描述

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

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

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

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

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

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

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

在這里插入圖片描述

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

由于方向固定(順時針方向)，圓錐漸變省略了固定方向的參數(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 也可以實現(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 編輯過

關鍵字查詢

html

css

正在查詢...

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

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

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

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

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

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

1 css+html繪制柱形圖

2 css+html繪制餅圖

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