如何规范制作便于他人后续维护的HTML推荐百分比图表？

根据你提供的参考图表需求，下面给出两种易维护的实现方向，无论后续接手人员技术水平如何，都能快速修改和维护：

一、自定义规范实现（完全可控、易修改） #

这种方式采用语义化结构+数据驱动的模式，代码清晰，维护成本极低。

1. 基础HTML结构（数据与结构分离） #

所有百分比数据通过data-percent属性存储，标签和数值一目了然，后续改数据直接修改对应内容即可：

<div class="recommendation-chart">
  <h3>推荐占比</h3>
  <div class="percent-item">
    <span class="label">强烈推荐</span>
    <div class="bar-wrap">
      <div class="bar" data-percent="78"></div>
      <span class="percent-text">78%</span>
    </div>
  </div>
  <div class="percent-item">
    <span class="label">推荐</span>
    <div class="bar-wrap">
      <div class="bar" data-percent="15"></div>
      <span class="percent-text">15%</span>
    </div>
  </div>
  <div class="percent-item">
    <span class="label">不推荐</span>
    <div class="bar-wrap">
      <div class="bar" data-percent="5"></div>
      <span class="percent-text">5%</span>
    </div>
  </div>
  <div class="percent-item">
    <span class="label">强烈不推荐</span>
    <div class="bar-wrap">
      <div class="bar" data-percent="2"></div>
      <span class="percent-text">2%</span>
    </div>
  </div>
</div>

2. 模块化CSS（变量统一管理） #

用CSS变量集中控制颜色、尺寸，后续改样式只需调整变量值，无需逐个修改元素：

/* 全局配置变量，一键修改整体风格 */
:root {
  --bar-height: 22px;
  --bar-radius: 11px;
  --bar-bg: #e5e5e5;
  --color-strong-good: #42b983;
  --color-good: #8dc63f;
  --color-bad: #f7b538;
  --color-strong-bad: #f05033;
}

.recommendation-chart {
  max-width: 450px;
  padding: 1.2rem;
  font-family: system-ui, sans-serif;
}

.percent-item {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.label {
  width: 120px;
  font-weight: 500;
}

.bar-wrap {
  flex: 1;
  height: var(--bar-height);
  background: var(--bar-bg);
  border-radius: var(--bar-radius);
  position: relative;
  overflow: hidden;
}

.bar {
  height: 100%;
  border-radius: var(--bar-radius);
  transition: width 0.3s ease;
}

.percent-text {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 500;
}

/* 按项分配颜色 */
.percent-item:nth-child(2) .bar { background-color: var(--color-strong-good); }
.percent-item:nth-child(3) .bar { background-color: var(--color-good); }
.percent-item:nth-child(4) .bar { background-color: var(--color-bad); }
.percent-item:nth-child(5) .bar { background-color: var(--color-strong-bad); }

3. 极简JS（动态渲染进度） #

从data-percent读取数值自动设置进度条宽度，后续无需修改JS代码：

document.querySelectorAll('.bar').forEach(bar => {
  const percent = bar.getAttribute('data-percent');
  bar.style.width = `${percent}%`;
});

维护指南 #

• 修改数据：直接修改HTML中data-percent值和percent-text里的百分比
• 调整样式：修改:root里的CSS变量，或者新增/修改对应类的样式
• 添加新项：复制整个percent-item块，修改标签、百分比数值，在CSS里添加对应颜色规则

二、现成库方案（快速开发、低维护） #

如果不需要高度定制UI，用成熟的图表库可以快速实现，且维护仅需修改配置数据。以Chart.js为例（可本地部署库文件，无需依赖外链）：

<canvas id="recChart" width="450" height="220"></canvas>

<script>
const ctx = document.getElementById('recChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['强烈推荐', '推荐', '不推荐', '强烈不推荐'],
    datasets: [{
      data: [78, 15, 5, 2],
      backgroundColor: [
        '#42b983',
        '#8dc63f',
        '#f7b538',
        '#f05033'
      ],
      borderRadius: 6,
      barThickness: 22
    }]
  },
  options: {
    indexAxis: 'y', // 横向条形图
    scales: {
      x: {
        beginAtZero: true,
        max: 100,
        grid: { display: false }
      },
      y: {
        grid: { display: false }
      }
    },
    plugins: {
      legend: { display: false },
      tooltip: { enabled: true }
    }
  }
});
</script>

维护指南 #

• 修改数据：直接更新labels和datasets[0].data数组内容
• 调整样式：修改backgroundColor数组的颜色，或调整options里的配置项
• 版本维护：本地部署稳定版的Chart.js文件，后续更新直接替换文件即可

方案选择建议 #

• 若需要完全定制UI且代码可控，选自定义规范实现
• 若追求开发速度、无需复杂定制，选Chart.js方案

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