PHP+CSS实现大数值区间柱状图差异化显示问题咨询

AI 小北

2026-9-24

核心实现逻辑

你要的「区间放大」本质是抛弃默认的0基准，用你的业务数据上下限作为高度换算的基准轴，换算逻辑如下：

先计算有效数值区间总跨度：区间跨度 = 最大值 - 最小值，你的场景下就是 65050 - 60330 = 4720
单根柱子高度换算公式：柱子高度 = (当前数值 - 最小值) / 区间跨度 * 图表总高度
- 当数值等于最小值时，计算结果为0，对应图表底部
- 当数值等于最大值时，计算结果等于图表总高度280px，对应图表顶部

PHP 实现代码示例

// 配置项，可根据需求调整
$axis_min = 60330;       // Y轴底部对应数值
$axis_max = 65050;       // Y轴顶部对应数值
$chart_height = 280;     // 图表总高度（单位：px）
$value_range = $axis_max - $axis_min;

// 你的业务数据源
$bar_values = [60400, 61200, 62500, 63700, 64800, 65050];

// 遍历生成每个柱子的样式
foreach ($bar_values as $val) {
    // 异常值兼容：超出区间的数值自动归到边界
    $safe_val = max($axis_min, min($val, $axis_max));
    // 计算当前柱子高度
    $current_height = round(($safe_val - $axis_min) / $value_range * $chart_height, 2);
    // 输出DOM，可自行添加类名、标签内容等
    echo "<div class='bar-item' style='height: {$current_height}px'></div>";
}

CSS 补充说明

需要给柱子的父容器设置底部对齐，保证柱子从下往上增长，符合柱状图视觉逻辑：

.bar-container {
  height: 280px;
  display: flex;
  align-items: flex-end; /* 核心：子元素底部对齐 */
  gap: 12px; /* 柱子之间的间距 */
}
.bar-item {
  width: 40px;
  background: #2385bb;
  border-radius: 4px 4px 0 0;
}