Vega-Lite柱状图文本描边需求：仅在文本外部添加白色描边

要实现仅在文本填充区域外部添加白色描边、避免描边与字体重叠的效果，你可以采用双层文本标记叠加的方案：通过两层文本配合，底层做白色粗描边（无填充），上层显示正常文本，模拟出纯外部描边的视觉效果。

具体实现步骤 #

将原有的单个文本标记替换为layer层，包含两个文本标记：

• 底层描边文本：设置填充为透明，描边为白色，加大描边宽度，确保能覆盖上层文本的边缘
• 上层正常文本：保留原有的文本样式（颜色、内容等）

代码示例片段 #

{
  "layer": [
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "fill": "transparent",
        "stroke": "white",
        "strokeWidth": 2
      },
      "encoding": {
        // 与原文本标记一致的x、y、text等编码配置
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle"
        // 保留原有的fill等样式配置
      },
      "encoding": {
        // 与原文本标记一致的x、y、text等编码配置
      }
    }
  ]
}

原理说明 #

直接设置文本的stroke属性时，描边会沿字符轮廓的内外两侧绘制，因此会与文本填充区域重叠导致视觉错乱。而双层文本的方式，底层的描边文本相当于给上层文本“套”了一层外边框，既保证了标签与动态变化的柱状图的对比度，又不会出现描边与填充重叠的问题。

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