AM5热力地图自定义函数：设置颜色范围并单独处理0值

需求说明 #

• 数值1-100之间实现平滑颜色渐变（多数值集中在20以内）
• 0值单独设置为浅灰色/白色，不参与渐变计算

原代码问题分析 #

原代码的customFunction存在语法错误，else块仅定义了颜色的min/max但未执行实际的颜色计算与赋值逻辑，无法实现预期效果。

可行实现代码 #

// 定义渐变的起始（浅橙）和结束（深棕）颜色
const colorMin = am5.color(0xff621f);
const colorMax = am5.color(0x661f00);

polygonSeries.set("heatRules", [{
  target: polygonSeries.mapPolygons.template,
  dataField: "value",
  key: "fill",
  customFunction: function(sprite, min, max, value) {
    if (value <= 0) {
      // 0值设置为浅灰色（可替换为0xffffff白色）
      sprite.set("fill", am5.color(0xf0f0f0));
    } else {
      // 将数值限制在1-100区间，避免超出范围导致颜色异常
      const clampedValue = Math.max(1, Math.min(value, 100));
      // 计算当前值在1-100范围内的占比
      const ratio = (clampedValue - 1) / (100 - 1);
      // 插值计算对应颜色，实现平滑过渡
      const interpolatedColor = am5.color(
        am5.colorInterpolation(colorMin, colorMax, ratio)
      );
      sprite.set("fill", interpolatedColor);
    }
  }
}]);

代码说明 #

• 先明确渐变的起止颜色，可根据需求自行调整色值
• 对0值直接设置固定填充色，排除在渐变逻辑外
• 针对1及以上的数值，先做区间限制（防止数值超过100或低于1），再通过am5.colorInterpolation方法计算对应比例的渐变颜色，实现平滑过渡

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