純 CSS 製作圓餅圖

通常要在網頁呈現圓餅圖，不外乎都得透過 SVG 或 Canvas 才能實現，這篇教學會使用 CSS 的「圓錐形」漸層色以及虛擬元素，簡單又快速的製作出圓餅圖。

快速導覽：

• CSS 漸層色製作圓餅圖
• CSS 漸層色搭配虛擬元素製作圓餅圖
• 使用 JavaScript 控制 CSS 圓餅圖

CSS 漸層色製作圓餅圖

透過指定特定角度的圓錐形漸層色，就能輕鬆做出圓餅圖，下方範例會展示兩個圓餅圖，第一個圓餅圖只有兩個區塊，第二個圓餅圖有六個區塊，從漸層色的角度差值中可看出每一個扇形的角度。

延伸閱讀：CSS 漸層色 - conic-gradient()

線上展示：https://codepen.io/oxxo/pen/PwYjMOp

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 150px;
    height: 150px;
    border-radius: 50%;  /* 使用圓角半徑讓容器變成圓形 */
    margin: 20px;
  }
  .a {
    background: conic-gradient(
      #fb0 0, 
      #fb0 200deg,
      #f66 0
    );
  }
  .b {
    background: conic-gradient(
      #fb0 0, 
      #fb0 50deg,
      #0a0 50deg,
      #0a0 100deg,
      #c5c 100deg,
      #c5c 200deg,
      #0af 200deg,
      #0af 230deg,
      #999 230deg,
      #999 270deg,
      #f66 0
    );
  }
</style>

CSS 漸層色搭配虛擬元素製作圓餅圖

如果要製作具有「邊框」效果的圓餅圖，則需要透過「虛擬元素」製作邊框和內容，下方範例將原本的兩個圓餅圖元素，額外產生「尺寸較大」的 ::before 虛擬元素，並透過絕對定位的方式讓元素與虛擬元素對齊中心，最後將虛擬元素擺放在下層並調暗顏色，就能做到漂亮的邊框圓餅圖效果。

延伸閱讀：虛擬元素選擇器 ( 偽元素 )、定位 position、數學計算 calc()

線上展示：https://codepen.io/oxxo/pen/NPKgQww

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;   /* 因為虛擬元素要進行絕對定位，父元素需要是 relative */
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px;
  }
  .a {
    background: conic-gradient(
      #fb0 0, 
      #fb0 200deg,
      #f66 0
    );
  }
  .b {
    background: conic-gradient(
      #f90 0, 
      #f90 50deg,
      #0a0 50deg,
      #0a0 100deg,
      #c5c 100deg,
      #c5c 200deg,
      #0af 200deg,
      #0af 230deg,
      #999 230deg,
      #999 270deg,
      #f66 0
    );
  }
  div::before {
    content: "";
    position: absolute;        /* 絕對定位 */
    z-index: -1;               /* 位置移動到下層 */
    width: calc(100% + 20px);  /* 尺寸比原本增加 20px */
    height: calc(100% + 20px); /* 尺寸比原本增加 20px */
    top: -10px;                /* 往上移動 10px */
    left: -10px;               /* 往左移動 10px */
    border-radius: 50%;        /* 變成圓形 */
  }
  .a::before {
    background: conic-gradient(
      #f90 0, 
      #f90 200deg,
      #f33 0
    );
  }
  .b::before {
    background: conic-gradient(
      #f60 0, 
      #f60 50deg,
      #080 50deg,
      #080 100deg,
      #a3a 100deg,
      #a3a 200deg,
      #08c 200deg,
      #08c 230deg,
      #666 230deg,
      #666 270deg,
      #f33 0
    );
  }
</style>

使用 JavaScript 控制 CSS 圓餅圖

可以使用 CSS 產生圓餅圖後，就能夠透過 JS 輕鬆將資料變成圓餅圖，下方的範例會將「12345」的陣列搭配隨機顏色的方式，產生每次執行都不同顏色的圓餅圖。

線上展示：https://codepen.io/oxxo/pen/QwLgezx

<!-- HTML 程式碼 -->
<div class="a"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 30px;
  }
</style>

<!-- JS 程式碼 -->
<script>
let chart_data = [1,2,3,4,5];                  // 建立陣列
let pie_chart = document.querySelector('.a');  // 讀取元素

function getRandomHexColor() {
  let hex = '';
  for (let i = 0; i <3; i++) {
    hex += Math.floor(Math.random() * 16).toString(16);  // 產生三個十六進位數字
  }
  return '#' + hex;  // 回傳結果，開頭補上 # 字號
}

let sum = chart_data.reduce((a, c) => a + c, 0);  // 計算陣列總數
let angle = 0;                                    // 起始角度
let result = '';                                  // 樣式結果
for(let i=0; i<5; i++){
  let color = getRandomHexColor();                // 隨機顏色
  result = `${result}${color} ${angle}deg,`;      // 起始顏色與角度
  angle = angle + chart_data[i]/sum*360;          // 增加的角度
  result = `${result}${color} ${angle}deg,`;      // 結束顏色與角度
}
result = result.substring(0, result.length - 1);  // 移除最後一個逗號
pie_chart.style.background = `conic-gradient(${result})`; // 添加樣式
</script>

小結

運用 CSS 製作圓餅圖相當方便，不過也因為受限於 CSS，一些進階的效果 ( 例如懸停放大、點擊...等 ) 都不支援，但如果是一些簡單的特效或功能，不妨利用 CSS 圓餅圖來取代。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～