如何去除Vega-Lite可视化图表的刻度并调整数值指示器位置

需求实现说明 #

• 移除X轴刻度区域：通过配置X轴属性隐藏刻度线、标签及轴线
• 条形内部添加数值指示器：新增文本标记层，将数值定位在条形右端内侧

修改后的完整代码 #

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "NULL"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": false
      },
      "encoding": {
        "x": {
          "field": "Number of calls__highlight"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    // 新增文本标记：显示数值在条形右端内部
    {
      "mark": {
        "type": "text",
        "align": "right",
        "dx": -5,
        "color": "#ffffff"
      },
      "encoding": {
        "x": {"field": "Number of calls__highlight", "type": "quantitative"},
        "y": {"field": "Number of calls", "type": "nominal"},
        "text": {"field": "Number of calls__highlight", "type": "quantitative"}
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "Number of calls",
      "type": "nominal",
      "title": ""
    },
    "x": {
      "type": "quantitative",
      "axis": {
        "title": "",
        "ticks": false,
        "labels": false,
        "domain": false
      },
      "title": ""
    }
  },
  "config": {
    "bar": {
      "color": "#605E5C",
      "cornerRadiusTopRight": 10,
      "cornerRadiusBottomRight": 10
    }
  }
}

关键修改点 #

1. 移除X轴刻度区域：在顶层encoding.x.axis中添加三个配置：

   • "ticks": false：隐藏X轴刻度短线
   • "labels": false：隐藏X轴刻度数值标签
   • "domain": false：隐藏X轴轴线
     三者组合可完全清除X轴的刻度相关区域。

2. 添加内部数值指示器：在layer数组新增文本标记层：

   • 标记类型设为text，通过align: "right"让文本右对齐条形右端
   • dx: -5设置向左偏移，确保文本显示在条形内部而非边缘
   • 绑定X/Y轴字段与文本内容，实现数值随条形位置同步显示

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