如何使用jQuery创建支持复选框交互的Donut环形图

实现效果如下：

实现逻辑 #

• 用SVG绘制环形基础结构，通过stroke-dasharray和stroke-dashoffset属性控制环形进度，逻辑简单无额外依赖
• 监听所有复选框的change事件，实时统计已勾选数量
• 进度值计算规则：已勾选数量 * 25%，最多4个复选框对应100%进度

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Donut环形进度图</title>
  <style>
    .donut-container {
      width: 200px;
      height: 200px;
      position: relative;
      margin-bottom: 20px;
    }
    .donut-ring {
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
    }
    .donut-bg {
      fill: none;
      stroke: #e0e0e0;
      stroke-width: 20;
    }
    .donut-progress {
      fill: none;
      stroke: #4caf50;
      stroke-width: 20;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.3s ease;
    }
    .donut-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  </style>
</head>
<body>
  <div class="donut-container">
    <svg width="200" height="200" class="donut-ring">
      <circle class="donut-bg" cx="100" cy="100" r="80" />
      <circle class="donut-progress" cx="100" cy="100" r="80" />
    </svg>
    <div class="donut-text" id="progressText">0%</div>
  </div>
  <div class="checkbox-group">
    <label><input type="checkbox" class="progress-checkbox"> 选项1</label>
    <label><input type="checkbox" class="progress-checkbox"> 选项2</label>
    <label><input type="checkbox" class="progress-checkbox"> 选项3</label>
    <label><input type="checkbox" class="progress-checkbox"> 选项4</label>
  </div>

  <script>
    const progressCircle = document.querySelector('.donut-progress');
    const progressText = document.getElementById('progressText');
    const checkboxes = document.querySelectorAll('.progress-checkbox');
    // 计算环形周长
    const radius = progressCircle.r.baseVal.value;
    const circumference = 2 * Math.PI * radius;
    // 设置stroke-dasharray为周长，初始stroke-dashoffset为周长（无进度）
    progressCircle.style.strokeDasharray = circumference;
    progressCircle.style.strokeDashoffset = circumference;

    // 更新进度函数
    function updateProgress(percent) {
      const offset = circumference - (percent / 100) * circumference;
      progressCircle.style.strokeDashoffset = offset;
      progressText.textContent = `${percent}%`;
    }

    // 监听复选框变化
    checkboxes.forEach(checkbox => {
      checkbox.addEventListener('change', () => {
        const checkedCount = document.querySelectorAll('.progress-checkbox:checked').length;
        const progress = checkedCount * 25;
        updateProgress(progress);
      })
    })
  </script>
</body>
</html>

可调整参数 #

• 环形颜色：修改.donut-progress的stroke属性即可
• 环形粗细：修改stroke-width属性
• 动画速度：修改transition的时长参数
• 半径大小：修改circle标签的r属性即可

内容的提问来源于stack exchange，提问作者abdelkader fattnassi