如何在Charts CSS图表上添加指定数值15.5的水平线

要在Charts.css柱状图里精准定位到15.5的位置添加水平线，核心是利用Charts.css的比例逻辑计算垂直位置：

核心原理 #

Charts.css的柱状高度由--size变量控制，这个变量是当前数值 ÷ 图表最大值的比例。观察你的数据，最大值是25，所以15.5对应的比例是：

15.5 ÷ 25 = 0.62

因为柱状图是从底部向上生长的，水平线的垂直位置需要用100% - 比例×100%计算，也就是：

100% - 62% = 38%

这个38%就是水平线的top属性值。

实现方案 #

方案1：用伪元素（无需修改HTML） #

直接给tbody添加伪元素生成水平线，代码如下：

tbody {
  min-height: 450px;
  position: relative; /* 保持相对定位，作为绝对定位容器 */
}

tbody::after {
  content: '';
  position: absolute;
  top: 38%; /* 计算好的垂直位置 */
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ff4444; /* 自定义线条颜色 */
  z-index: 1; /* 控制层级，默认在柱子下方，需在上方则调大数值 */
}

方案2：添加独立元素（支持额外标签） #

如果需要给水平线添加数值标签，推荐在tbody里新增一个div元素：
修改后的HTML：

<link href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css" rel="stylesheet"/>
<table class="charts-css column show-labels data-spacing-10" id="my-chart">
  <thead>
    <tr>
      <th scope="col">Stat</th>
      <th scope="col">Value</th>
    </tr>
  </thead>

  <tbody class="position-relative mb-4">
    <!-- 新增水平线元素 -->
    <div class="chart-horizontal-line"></div>
    
    <tr>
      <th>1/14</th>
      <td style="--size: 0.48; --color: #bc2e2f">12</td>
    </tr>
    <tr>
      <th>1/15</th>
      <td style="--size: 0.84; --color: #27ae60">21</td>
    </tr>
    <!-- 其他表格行保持不变 -->
  </tbody>
</table>

对应的CSS：

tbody {
  min-height: 450px;
  position: relative;
}

.chart-horizontal-line {
  position: absolute;
  top: 38%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #ff4444;
  z-index: 1;
}

/* 可选：添加数值标签 */
.chart-horizontal-line::after {
  content: '15.5';
  position: absolute;
  right: 0;
  top: -15px;
  padding: 2px 6px;
  background-color: #ff4444;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
}

注意事项 #

如果后续图表最大值发生变化，只需要重新计算比例并更新top值即可。比如最大值变为30时，15.5对应的比例是15.5/30≈0.5167，top值就是100% - 51.67%≈48.33%。

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