如何在Vega-Lite条形图的文本标签中添加百分号(%)

你可以通过两种简单方式实现给条形上方的数值标签添加百分号：

方法一：直接格式化字段值 #

在文本标记的编码配置中，为text字段指定format属性，将数值格式化为带百分号的字符串。如果你的数值是整数（比如50），可以用"d%"格式符：

{
  mark: { type: "text", dy: -10 },
  encoding: {
    text: { field: "value", format: "d%" },
    // 其他编码配置（x、y、color等）保持不变
  }
}

方法二：通过计算字段生成带百分号的文本 #

在图表的transform中添加计算逻辑，将数值拼接百分号后生成新字段，再用这个字段作为文本标签：

{
  transform: [
    { calculate: "datum.value + '%'", as: "value_with_percent" }
  ],
  layer: [
    // 条形图的mark配置
    { mark: "bar" },
    // 文本标签的mark配置
    {
      mark: { type: "text", dy: -10 },
      encoding: {
        text: { field: "value_with_percent" },
        // 其他编码配置保持不变
      }
    }
  ]
}

两种方法都能让数值50显示为50%，你可以根据自己的配置习惯选择其中一种。

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