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 圆饼图来取代。

意见反馈