今天我們來學習一下如何使用 CSS 制作環形圖。環形圖是一種很常見的數據可視化圖表，適用于展示百分比和占比等數據。 首先，我們需要在 HTML 中創建一個容器來放置我們的環形圖。可以用一個 div 標簽來實現：

<div class="chart"></div>

接下來，我們需要用 CSS 來實現環形圖的樣式。首先，為了制作出環形圖的效果，我們需要用 border 這個屬性來給容器添加邊框。同時，我們需要讓容器的寬度和高度一致，以保證我們畫出來的圖是圓形而不是橢圓形：

.chart {
width: 300px;
height: 300px;
border-radius: 50%;
border: 50px solid #e1e1e1;
 }

然后，我們需要添加一個內部的圓形，以表示環形圖中的數據。我們需要使用一個偽元素來創建這個圓形。具體來說，我們要用 :after 偽元素，并設置它的寬度和高度為容器的一半（即 150px），并且將其定位在容器中心。最后，我們設置圓形的顏色為藍色：

.chart:after {
content: "";
width: 150px;
height: 150px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #377dff;
 }

現在我們已經成功地繪制出了一個環形圖，并且我們還可以通過更改 border 的值來調整環形圖的厚度。不過，我們還沒有將環形圖與一個真實的數據集相關聯。我們需要動態地設置偽元素的 width 屬性來反映出數據占比。 可以在 JavaScript 中得到數據并計算出百分比，然后使用偽元素的 style 屬性動態地設置寬度。代碼示例如下：

var percentage = 75;
 var chart = document.querySelector(".chart");
 chart.style.setProperty("--percentage", percentage + "%");

然后，我們在 CSS 中將變量 --percentage 關聯到偽元素的 width 屬性：

.chart:after {
//...
width: var(--percentage);
 }

完整的 CSS 樣式如下所示：

.chart {
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
border: 50px solid #e1e1e1;
}
.chart:after {
content: "";
width: var(--percentage);
height: 150px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #377dff;
}

現在，我們已經可以使用 CSS 和 JavaScript 來創建環形圖，并且與數據動態關聯。希望這篇文章能夠幫助到你！