如何为同图层内不同组Y轴字段分配独立坐标轴？

核心需求 #

同一图层内包含3个Y轴字段：daily_total_login、daily_active_user、daily_dashboard_views，需要实现：

• daily_total_login和daily_dashboard_views共享左侧同一坐标轴
• daily_active_user使用右侧独立坐标轴
• 不能拆分图层，保留字段原有顺序

解决方案 #

关键是通过指定scale名称+resolve配置来控制坐标轴共享逻辑，而不是直接将y设为全局independent。修改后的代码如下：

"layer": [
  {
    "mark": {"type": "bar", "tooltip": true},
    "encoding": {
      "y": {
        "field": "daily_total_login",
        "type": "quantitative",
        "scale": {"name": "shared_left_y"}, // 标记共享坐标轴的scale名称
        "axis": {"title": "Logins & Dashboard Views", "orient": "left"}
      }
    },
    "name": "CHART_0"
  },
  {
    "mark": {"type": "bar", "tooltip": true},
    "encoding": {
      "y": {
        "field": "daily_active_user",
        "type": "quantitative",
        "scale": {"name": "independent_right_y"}, // 标记独立坐标轴的scale名称
        "axis": {"title": "Active Users", "orient": "right"}
      }
    }
  },
  {
    "mark": {"type": "bar", "tooltip": true},
    "encoding": {
      "y": {
        "field": "daily_dashboard_views",
        "type": "quantitative",
        "scale": {"name": "shared_left_y"}, // 复用第一个字段的scale名称
        "axis": null // 隐藏重复轴，避免界面混乱
      }
    }
  }
],
"resolve": {
  "scale": {
    "y": {
      "shared_left_y": "shared", // 该scale下的字段共享坐标轴
      "independent_right_y": "independent" // 该scale下的字段使用独立坐标轴
    }
  }
}

逻辑说明 #

1. scale命名分组：给需要共享轴的字段分配同一个scale名称，独立字段分配专属scale名称
2. resolve精准控制：在resolve.scale.y中，分别配置不同scale的共享规则
3. 隐藏重复轴：给共享轴的第二个字段设置axis: null，避免出现重复的左侧轴标题

这样就能在同一图层内实现部分字段共享坐标轴、其余字段独立轴的效果，同时保留字段原有顺序。

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