Angular中AG-Grid单元格线性渐变配色失效，仅显蓝白如何修复？

问题根源 #

• 模板字符串语法错误：你使用了$(red)这种错误的ES6模板字符串语法，正确写法应为${red}。错误语法导致RGB值未被正确解析，浏览器 fallback 到异常颜色表现（仅蓝白）。
• 配色插值逻辑完全错误：
  1. 未定义对应数值0的白色中间端点，当前公式的中间色是蓝调的rgb(14,109,60)，无法实现红-白-蓝的渐变效果。
  2. 权重计算方向与配色需求不匹配：数值范围是-50到50，需要将其映射到0~1的权重区间，而非基于50的差值计算，否则颜色只会偏向单一方向。

修正后的代码实现 #

// 处理单元格数值，映射为0~1的权重（-50→0，0→0.5，50→1）
const value = params.value;
const weight = (value + 50) / 100;

// 定义三个配色端点：红(-50)、白(0)、蓝(50)
const [redStart, greenStart, blueStart] = [165, 42, 8];
const [redMid, greenMid, blueMid] = [255, 255, 255];
const [redEnd, greenEnd, blueEnd] = [14, 109, 60];

let red, green, blue;
if (weight <= 0.5) {
  // 红→白的渐变，权重0~0.5转为0~1的子权重
  const subWeight = weight * 2;
  red = Math.round(redStart * (1 - subWeight) + redMid * subWeight);
  green = Math.round(greenStart * (1 - subWeight) + greenMid * subWeight);
  blue = Math.round(blueStart * (1 - subWeight) + blueMid * subWeight);
} else {
  // 白→蓝的渐变，权重0.5~1转为0~1的子权重
  const subWeight = (weight - 0.5) * 2;
  red = Math.round(redMid * (1 - subWeight) + redEnd * subWeight);
  green = Math.round(greenMid * (1 - subWeight) + greenEnd * subWeight);
  blue = Math.round(blueMid * (1 - subWeight) + blueEnd * subWeight);
}

return { backgroundColor: `rgb(${red}, ${green}, ${blue})` };

关键修正点说明 #

1. 修复模板字符串语法，确保RGB值被正确渲染。
2. 新增白色中间端点，匹配红-白-蓝的渐变需求。
3. 将数值正确映射到0~1的权重区间，分两段处理渐变，保证颜色过渡自然。
4. 用Math.round()将RGB值转为整数，避免浏览器解析无效的非整数值。

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