Vega Lite分面嵌套图表如何实现共享标签 达到Tableau紧凑效果

效果参考 #

• Tableau目标效果：
  
• 原有Vega Lite实现效果：
  

当前多层嵌套facet的写法没有配置轴/刻度共享规则，默认给每个子图生成独立坐标轴，是导致冗余标签多、留白多、信息密度低的核心原因。通过以下配置调整即可实现和Tableau一致的分面效果：

核心配置逻辑 #

• 不要无意义嵌套多层spec+facet，按分面层级从高到低配置facet维度：高层级分面（快递方式<行>、类别<列>）放在最外层facet，低层级分面（子类别、细分）放在内层spec的facet中
• 全局配置轴与刻度共享：所有层级的spec都添加resolve配置，将x、y方向的axis和scale都设置为shared，同列/同行子图会自动共用坐标轴，不再重复生成轴标签
• 关闭非边缘位置子图的轴标签、刻度，仅保留整组分面最左侧、最底部的轴标识，进一步压缩空间
• 压减所有冗余间距：将全局和各层级的spacing设置为1-2px，调整header的labelPadding、titlePadding到最小值，去掉多余留白
• 按层级配置分面header：高层级维度的header设置跨组显示，低层级维度的header紧贴对应子分组，取消不必要的header标题

修正后可直接使用的配置代码 #

{
  "data": {"url": "https://uniplore-source.oss-cn-chengdu.aliyuncs.com/other/orders2.csv"},
  "spacing": 2,
  "bounds": "flush",
  "facet": {
    "row": {
      "field": "快递方式",
      "type": "nominal",
      "header": {"labelAngle": 0, "labelAlign": "left", "labelPadding": 4}
    },
    "column": {
      "field": "类别",
      "type": "nominal",
      "header": {"labelPadding": 4}
    }
  },
  "spec": {
    "spacing": 1,
    "facet": {
      "column": {
        "field": "子类别",
        "type": "nominal",
        "header": {"title": null, "labelPadding": 2}
      }
    },
    "spec": {
      "width": 28,
      "height": 40,
      "mark": "bar",
      "encoding": {
        "x": {
          "field": "细分",
          "type": "nominal",
          "title": null,
          "axis": {"labels": false, "ticks": false, "domainWidth": 1}
        },
        "y": {
          "aggregate": "sum",
          "field": "销售额",
          "title": null,
          "axis": {"labels": false, "ticks": false, "domainWidth": 1, "grid": false}
        }
      },
      "resolve": {
        "axis": {"x": "shared", "y": "shared"},
        "scale": {"x": "shared", "y": "shared"}
      }
    },
    "resolve": {
      "axis": {"x": "shared", "y": "shared"},
      "scale": {"x": "shared", "y": "shared"}
    }
  },
  "resolve": {
    "axis": {"x": "shared", "y": "shared"},
    "scale": {"x": "shared", "y": "shared"}
  },
  "config": {
    "view": {"stroke": "#ddd", "strokeWidth": 0.5},
    "facet": {"spacing": 1},
    "header": {"labelFontSize": 11}
  }
}

效果对齐说明 #

配置完成后，分面标签会按Tableau的逻辑分层显示：最高层级的快递方式标签显示在每行最左侧，类别标签显示在每列最顶部，子类别、细分标签对应到下层分组，没有重复的坐标轴标签，子图间距最小化，信息密度和Tableau原生分面效果基本一致，同等数据量可在单屏内完整展示。
如果需要显示全局坐标轴标题，只需要在最外层对应轴的encoding中添加title属性即可，不需要在子图内重复配置。

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