Vega-Lite正负值水平柱状图cornerRadiusEnd圆角与标签align配置问题

1. 柱状圆角位置异常修复 #

cornerRadiusEnd 会默认以数值靠近0轴的一侧为起始端、远离0轴的一侧为结束端，负值场景下结束端判定和预期相反，你可以通过单独配置四个角的圆角属性，结合表达式判断实现预期效果：

{
  "mark": {
    "type": "bar",
    // 正值柱状右侧（远离0轴端）加圆角
    "cornerRadiusTopRight": {"expr": "datum.mean > 0 ? 100 : 0"},
    "cornerRadiusBottomRight": {"expr": "datum.mean > 0 ? 100 : 0"},
    // 负值柱状左侧（远离0轴端）加圆角
    "cornerRadiusTopLeft": {"expr": "datum.mean < 0 ? 100 : 0"},
    "cornerRadiusBottomLeft": {"expr": "datum.mean < 0 ? 100 : 0"}
  }
}

2. 标签对齐失效修复 #

仅配置align无法实现标签内置效果，需要同时配合水平偏移dx调整标签位置，完整配置如下：

"encoding": {
  "text": {"field": "mean", "type": "quantitative"},
  "align": {
    "expr": "datum.mean < 0 ? 'right' : 'left'"
  },
  // 正负值均向柱子内部偏移4像素，可根据实际需求调整数值
  "dx": {
    "expr": "datum.mean < 0 ? 4 : -4"
  }
}

如果使用分层实现标签，需要保证text层的x、y编码和bar层完全一致，避免位置偏移。

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