在Web開發中，我們經常需要呈現數據，其中一種方式是使用環形比例圖展示百分比。這種圖表的優點是視覺效果良好且易于閱讀，使用CSS代碼實現也相對簡單。
/*HTML代碼*//*CSS代碼*/ .chart { position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; background-color: #f2f2f2; } .chart span { display: block; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; transform-origin: left; background-color: red; transform: rotate(0deg); } /*JS代碼*/ const percent = document.querySelector('.chart').dataset.percent; const span = document.querySelector('.chart span'); if (percent<= 50) { span.style.transform = `rotate(${(percent / 100) * 360}deg)`; } else { span.style.transformOrigin = 'right'; span.style.transform = `rotate(${((percent - 50) / 100) * 360}deg)`; }
上面是一個簡單的示例。首先，我們定義了一個含有百分比值的
元素，以及一個空的元素。接著，我們在CSS中設置了圓形背景和環形內部的紅色部分。最后，在JS中獲取百分比值，并計算角度，將元素旋轉到合適的位置，實現環形比例圖的效果。
此外，我們還可以通過樣式調整來改變環形比例圖的外觀。例如，增加圓形邊框或內部字體，在不同設備上呈現不同大小的環形比例圖等。
總結來說，使用CSS實現環形比例圖的方法較為簡單，僅需設置幾個樣式屬性并使用JS計算角度即可。與傳統的圖表相比，環形比例圖在視覺效果和易讀性方面更有優勢。通過樣式調整，我們還可以定制化環形比例圖的外觀，以適應不同設備和場景的需求。