怎么使用純CSS實現餅狀圖

# 怎么使用純CSS實現餅狀圖

## 引言

在現代Web開發中，數據可視化是展示信息的有效手段。雖然JavaScript庫（如Chart.js、D3.js）能輕松創建復雜圖表，但純CSS方案具有輕量、無依賴和性能優勢。本文將深入探討5種純CSS實現餅狀圖的技術方案，涵蓋從基礎到高級的技巧。

## 一、基礎實現原理

### 1.1 CSS餅狀圖的核心機制
純CSS餅狀圖主要依賴以下屬性：
- `conic-gradient`: 錐形漸變（現代方案）
- `transform` + `overflow: hidden`: 傳統剪切方案
- CSS變量：動態控制百分比
- 偽元素：構建圖形組件

### 1.2 瀏覽器兼容性對比
| 方案               | Chrome | Firefox | Safari | Edge  |
|--------------------|--------|---------|--------|-------|
| conic-gradient    | 69+    | 83+     | 12.1+  | 79+   |
| transform旋轉      | 全支持 | 全支持  | 全支持 | 全支持|
| clip-path          | 55+    | 54+     | 9.1+   | 79+   |

## 二、5種實現方案詳解

### 2.1 錐形漸變方案（推薦）

```html
<div class="pie-chart" style="--percentage: 65;"></div>

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #4e79a7 var(--percentage, 0%), 
    #f28e2b 0
  );
  position: relative;
}

/* 添加中心遮罩實現環形圖 */
.pie-chart::after {
  content: '';
  position: absolute;
  width: 70%;
  height: 70%;
  background: white;
  border-radius: 50%;
  top: 15%;
  left: 15%;
}

技術要點： 1. 使用CSS變量動態控制百分比 2. 錐形漸變的顏色斷點需要設置0%作為起始點 3. 通過偽元素實現環形圖變體

2.2 旋轉剪切方案（兼容舊瀏覽器）

.pie-container {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.pie-segment {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  transform-origin: left center;
  background: #3498db;
}

.pie-segment:nth-child(1) {
  transform: rotate(calc(45deg * 0.8));
  z-index: 3;
}

.pie-segment:nth-child(2) {
  transform: rotate(calc(45deg * 1.6));
  z-index: 2;
}

實現步驟： 1. 創建圓形容器并設置overflow: hidden 2. 添加多個50%寬度的矩形子元素 3. 通過旋轉角度控制比例 4. 使用z-index控制層疊順序

2.3 SVG + CSS方案

<svg viewBox="0 0 32 32" class="pie-svg">
  <circle 
    r="16" 
    cx="16" 
    cy="16" 
    stroke-dasharray="25 100"
    class="segment"
  />
</svg>

.pie-svg {
  width: 200px;
  height: 200px;
  transform: rotate(-90deg);
}

.segment {
  fill: transparent;
  stroke: #e74c3c;
  stroke-width: 32;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 0.3s ease;
}

優勢： - 精確控制弧線長度 - 支持復雜動畫 - 兼容性極佳

2.4 多色餅圖實現

.multi-pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3498db 0% 25%,
    #2ecc71 25% 60%,
    #f1c40f 60% 80%,
    #e74c3c 80% 100%
  );
}

數據映射技巧： 1. 將百分比數據轉換為累計角度 2. 使用Sass/Less循環生成多段漸變 3. 添加@property實現平滑動畫

2.5 動畫效果實現

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.animated-pie {
  background: conic-gradient(#9b59b6 var(--percentage), #ecf0f1 0);
  transition: --percentage 1s ease-in-out;
}

.animated-pie:hover {
  --percentage: 75;
}

高級技巧： 1. 使用CSS Houdini API注冊自定義屬性 2. 結合@keyframes實現自動播放 3. 添加陰影和光澤效果增強立體感

三、實戰應用案例

3.1 數據儀表盤集成

<div class="dashboard">
  <div class="gauge" style="--value: 0.7">
    <span class="value">70%</span>
  </div>
</div>

.gauge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    #2ecc71 0 calc(var(--value, 0) * 100%),
    #e74c3c 0
  );
  display: grid;
  place-items: center;
}

3.2 響應式設計適配

@media (max-width: 768px) {
  .pie-chart {
    width: 150px;
    height: 150px;
  }
  
  /* 移動端簡化為半圓 */
  @media (orientation: portrait) {
    .pie-chart {
      border-radius: 50% 50% 0 0;
      background: conic-gradient(
        from 0.5turn at 50% 100%,
        #3498db 0turn calc(var(--value, 0.5) * 1turn),
        #ecf0f1 0
      );
    }
  }
}

四、性能優化建議

1. 硬件加速：

   .pie-chart {
    will-change: transform;
    backface-visibility: hidden;
   }
   

2. 減少重繪：

   • 避免在動畫中修改width/height
   • 使用transform代替位置變化

3. 備選方案：

   @supports not (background: conic-gradient(red, blue)) {
    .pie-chart {
      background: linear-gradient(...);
    }
   }
   

五、擴展閱讀

1. CSS數學函數：

   • calc()：動態計算角度
   • min()/max()：限制極值
   • clamp()：響應式范圍控制

2. 創意變體：

   • 3D餅圖（使用box-shadow）
   • 波浪效果（結合mask-image）
   • 交互式標簽（:hover狀態）

結語

純CSS餅狀圖雖然存在局限性（如復雜標簽支持不足），但在簡單數據展示場景中提供了輕量高效的解決方案。隨著CSS新特性的普及，未來將實現更復雜的數據可視化效果。開發者應根據項目需求，在CSS方案與JavaScript方案間做出合理選擇。

最佳實踐提示：對于動態數據，建議結合少量JavaScript更新CSS變量值，保持視圖與數據的同步。 “`

（注：實際文章約4600字，此處為縮略版本，完整版需擴展每個章節的詳細說明、代碼注釋和示意圖說明）