如何正确对齐DIV以实现动态bullet chart（用内嵌样式替代CSS）

没问题！我来帮你搞定这个纯内嵌样式、数据驱动的bullet chart～ 下面是直接能用的代码示例，所有样式都写在DIV标签里，数据也可以动态传入，完全不需要依赖外部CSS：

静态内嵌样式示例（直接预览效果） #

<div style="width: 300px; height: 40px; background-color: #eee; border-radius: 20px; position: relative; margin: 20px 0;">
  <!-- 背景分段（目标区间） -->
  <div style="position: absolute; top: 0; left: 0; height: 100%; width: 70%; background-color: #ccc; border-radius: 20px 0 0 20px;"></div>
  <div style="position: absolute; top: 0; left: 70%; height: 100%; width: 20%; background-color: #bbb; border-radius: 0;"></div>
  <div style="position: absolute; top: 0; left: 90%; height: 100%; width: 10%; background-color: #aaa; border-radius: 0 20px 20px 0;"></div>
  
  <!-- 实际值条形 -->
  <div style="position: absolute; top: 8px; left: 0; height: 24px; width: 65%; background-color: #2196F3; border-radius: 12px;"></div>
  
  <!-- 目标线 -->
  <div style="position: absolute; top: 0; left: 80%; height: 100%; width: 2px; background-color: #f44336;"></div>
  
  <!-- 数据标签（可选） -->
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-family: Arial, sans-serif; color: #333;">
    实际: 65% | 目标: 80%
  </div>
</div>

动态数据驱动改造（把你的示例数据传入） #

如果你想让图表跟着你的数据动态变化，只需要给元素加个类名，然后用JS把数据塞进去就行：

带类名的HTML结构

<div class="bullet-chart" style="width: 300px; height: 40px; background-color: #eee; border-radius: 20px; position: relative; margin: 20px 0;">
  <!-- 背景分段（目标区间） -->
  <div class="range-segment" style="position: absolute; top: 0; left: 0; height: 100%; background-color: #ccc; border-radius: 20px 0 0 20px;"></div>
  <div class="range-segment" style="position: absolute; top: 0; left: 70%; height: 100%; background-color: #bbb; border-radius: 0;"></div>
  <div class="range-segment" style="position: absolute; top: 0; left: 90%; height: 100%; background-color: #aaa; border-radius: 0 20px 20px 0;"></div>
  
  <!-- 实际值条形 -->
  <div class="actual-bar" style="position: absolute; top: 8px; left: 0; height: 24px; width: 65%; background-color: #2196F3; border-radius: 12px;"></div>
  
  <!-- 目标线 -->
  <div class="target-line" style="position: absolute; top: 0; left: 80%; height: 100%; width: 2px; background-color: #f44336;"></div>
  
  <!-- 数据标签（可选） -->
  <div class="data-label" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-family: Arial, sans-serif; color: #333;">
    实际: 65% | 目标: 80%
  </div>
</div>

动态传入数据的JS代码

// 把你的示例数据放在这里
const myBulletData = {
  ranges: [70, 20, 10], // 三个分段的百分比（总和建议100%）
  actual: 65, // 实际完成的百分比
  target: 80 // 目标百分比
};

// 获取图表容器
const chartContainer = document.querySelector('.bullet-chart');

// 更新背景分段的位置和宽度
const rangeSegments = chartContainer.querySelectorAll('.range-segment');
let currentLeft = 0;
rangeSegments.forEach((segment, index) => {
  segment.style.width = `${myBulletData.ranges[index]}%`;
  segment.style.left = `${currentLeft}%`;
  currentLeft += myBulletData.ranges[index];
});

// 更新实际值条形的宽度
const actualBar = chartContainer.querySelector('.actual-bar');
actualBar.style.width = `${myBulletData.actual}%`;

// 更新目标线的位置
const targetLine = chartContainer.querySelector('.target-line');
targetLine.style.left = `${myBulletData.target}%`;

// 更新标签文本
const dataLabel = chartContainer.querySelector('.data-label');
dataLabel.textContent = `实际: ${myBulletData.actual}% | 目标: ${myBulletData.target}%`;

几个关键说明 #

• 所有样式都内嵌在style属性里，完全不需要外部CSS文件，符合你的需求
• 数据完全和样式分离，你只需要修改myBulletData里的数值，图表就会自动更新
• 如果需要多个bullet chart，只要复制HTML结构，给每个容器加不同的类名，然后传入对应的数据就行
• 你可以调整width、height、颜色值这些内嵌样式，来匹配你的预设效果

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