AmChart v4中如何按数值自定义棒棒糖图描边颜色？

原代码如下：

// change stroke color per value
series.adapter.add('stroke', function (stroke, target) {
  if (!target.dataItem) {
    return stroke;
  }

  var values = target.dataItem.values;

  return values.valueY.value < 100
    ? 'red'
    : values.valueY.value > 100
    ? 'yellow'
    : 'green';
});

上述代码仅返回绿色描边，无法实现按数值条件返回不同描边颜色的效果。

问题原因及解决方案 #

核心问题 #

最可能的原因是数据中的valueY值为字符串类型，直接使用</>进行比较时会触发字符串字典序比较，而非数值比较，导致所有判断都不满足，最终进入默认分支返回绿色。

修正后的代码 #

// change stroke color per value
series.adapter.add('stroke', function(stroke, target) {
  if (!target.dataItem) {
    return stroke;
  }

  // 将值转换为数字，确保数值比较的正确性
  const value = parseFloat(target.dataItem.valueY.value);

  // 处理转换失败的情况
  if (isNaN(value)) {
    return stroke;
  }

  // 清晰的条件判断
  if (value < 100) {
    return 'red';
  } else if (value > 100) {
    return 'yellow';
  } else {
    return 'green';
  }
});

额外优化建议 #

• 如果确认数据源的valueY本身就是数字类型，可以跳过parseFloat转换，但保留isNaN校验能提升代码健壮性。
• 嵌套三元表达式可读性较差，改用if-else结构更便于后续维护和调试。

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