如何根据图表极值计算<stop offset>实现0%红到100%绿的渐变设置

核心计算方案 #

这里提供两种适配不同场景的可直接落地的计算逻辑，可直接对接你现有渐变配置规则：

前置说明 #

你的图表Y轴从下到上对应数值从低到高，渐变的offset百分比0%对应图表底部，100%对应图表顶部，默认遵循低值偏红、高值偏绿的配色规则。

方案1：保留最优视觉效果（适配无极端正负值的场景） #

和你测试的0-20%最优效果一致，固定渐变过渡带的视觉宽度为20%（可自行调整参数），仅在底部低值区域做红到绿的渐变，高值区域统一为绿色，适配所有普通数值范围：

// 入参说明：transitionWidth为自定义过渡带宽度，默认20%
function getBottomTransitionStops(transitionWidth = 20) {
  return {
    redStop: '0%',
    greenStop: `${transitionWidth}%`
  }
}

该方案基于视觉比例固定过渡带，无需额外数值映射，不管你的数值范围是$-10_$72还是$0$100，都能保持你要的最优视觉效果。

方案2：适配极端正负值场景 #

如果数据集同时存在正负值，需要让0值附近作为渐变过渡带，低于0偏红、高于0偏绿，用以下动态计算逻辑：

// 入参：数据集最低值minVal、最高值maxVal、自定义过渡带宽度（默认20%）
function getZeroTransitionStops(minVal, maxVal, transitionWidth = 20) {
  // 计算0值在图表高度中对应的百分比位置
  const zeroPointOffset = ((0 - minVal) / (maxVal - minVal)) * 100;
  // 过渡带以0值为中心，上下各占一半宽度，超出0-100%范围的部分自动截断
  const redOffset = Math.max(0, zeroPointOffset - transitionWidth / 2);
  const greenOffset = Math.min(100, zeroPointOffset + transitionWidth / 2);
  return {
    redStop: `${redOffset.toFixed(1)}%`,
    greenStop: `${greenOffset.toFixed(1)}%`
  }
}

// 极端场景调用示例：最低值-100，最高值0
const stops = getZeroTransitionStops(-100, 0);
// 输出结果：{redStop: "90.0%", greenStop: "100.0%"}，渐变过渡在顶部0值附近，低于0的主体区域为红色，符合预期

实际使用 #

将计算得到的redStop和greenStop填入渐变的两个stop节点即可：

<linearGradient id="valueGradient" x1="0" x2="0" y1="1" y2="0">
  <stop offset="这里填redStop的值" stop-color="#ff0000" />
  <stop offset="这里填greenStop的值" stop-color="#00ff00" />
</linearGradient>

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