如何为双轴多层图表的各图层分配Y轴及刻度

我有一个多层可视化图表，其中实际数据以带文本标记（即标签）的条形图呈现，多个不同目标数据以折线图呈现。注：这只是一个极简测试用例，实际可视化图表更复杂、样式不同。

期望实现：

• 条形图分配到左侧Y轴并使用独立刻度
• 两个折线图（Target和North Star）分配到右侧Y轴（两者使用相同刻度，但与条形图刻度不同）

我尝试过使用resolve语句和多层级图层（图层组），但未找到合适的解决方案。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
        "values": [
          {"DATE": "2020-02-02", "Value": 50, "Target": 70, "North Star": 220},
          {"DATE": "2020-02-03", "Value": 70, "Target": 90, "North Star": 220},
          {"DATE": "2020-02-04", "Value": 80, "Target": 95, "North Star": 220},
          {"DATE": "2020-02-05", "Value": 85, "Target": 100, "North Star": 230},
          {"DATE": "2020-02-06", "Value": 91, "Target": 105, "North Star": 230}
        ]
      },
      "encoding": {
        "x": {"field": "DATE", "type": "nominal"},
        "y": {"field": "Value", "type": "quantitative"}
      },
      "layer": [
        { "mark": "bar" },
        {
          "mark": {"type": "text", "dy": -7},
          "encoding": { "text": { "field": "Value", "type": "quantitative" }}
        },
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {
            "y": {"field": "Target", "type": "quantitative", "axis": null },
            "color": { "value": "green"}
          }
        },
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {"y": {"field": "North Star", "type": "quantitative" },
          "color": { "value": "red"}
          }
        }
      ],
      "resolve": { "scale": {"y": "independent"}}
  }

要实现需求，需通过图层分组让两个折线图共享右侧Y轴，同时保留条形图的左侧独立Y轴。关键调整点：

1. 将两个折线图嵌套在一个子图层中，确保它们共享同一个Y刻度
2. 为子图层的Y轴显式指定axis: {orient: "right"}，让其显示在右侧
3. 保留resolve: {scale: {y: "independent"}}确保左右Y轴刻度独立

修改后的代码如下：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"DATE": "2020-02-02", "Value": 50, "Target": 70, "North Star": 220},
      {"DATE": "2020-02-03", "Value": 70, "Target": 90, "North Star": 220},
      {"DATE": "2020-02-04", "Value": 80, "Target": 95, "North Star": 220},
      {"DATE": "2020-02-05", "Value": 85, "Target": 100, "North Star": 230},
      {"DATE": "2020-02-06", "Value": 91, "Target": 105, "North Star": 230}
    ]
  },
  "encoding": {
    "x": {"field": "DATE", "type": "nominal"},
    "y": {"field": "Value", "type": "quantitative", "axis": {"orient": "left"}}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {"type": "text", "dy": -7},
      "encoding": {"text": {"field": "Value", "type": "quantitative"}}
    },
    {
      "layer": [
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {
            "y": {"field": "Target", "type": "quantitative"},
            "color": {"value": "green"}
          }
        },
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {
            "y": {"field": "North Star", "type": "quantitative"},
            "color": {"value": "red"}
          }
        }
      ],
      "encoding": {
        "y": {"type": "quantitative", "axis": {"orient": "right"}}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

调整后效果说明：

• 左侧Y轴对应条形图的Value数据，刻度独立
• 右侧Y轴同时对应Target和North Star数据，两者共用一套刻度
• 折线图的Y轴范围会自动适配两个系列的数值，保证数据完整展示

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