隐藏/移除Vega-Lite图表次级Y轴及百分比值缩放方案咨询

一、隐藏次级Y轴（保留图例） #

原代码用repeat生成图层，没法单独控制某个Y轴的显示。改成显式图层结构，就能对第二个图层的Y轴设置隐藏，同时保留图例：

{
  "autosize": "fit",
  "title": {"text": "a layered chart using Vega-Lite", "frame": "group"},
  "data": {
    "name": "thedata",
    "values": [
      {"month": "Jan" , "sales": 8000, "by new customers": 0.2},
      {"month": "Feb" , "sales": 8200, "by new customers": 0.21},
      {"month": "Mar" , "sales": 8700, "by new customers": 0.3},
      {"month": "Apr" , "sales": 9000, "by new customers": 0.33},
      {"month": "May" , "sales": 10000, "by new customers": 0.4},
      {"month": "Jun" , "sales": 11000, "by new customers": 0.41},
      {"month": "Jul" , "sales": 11200, "by new customers": 0.38},
      {"month": "Aug" , "sales": 12000, "by new customers": 0.36},
      {"month": "Sep" , "sales": 13000, "by new customers": 0.32},
      {"month": "Oct" , "sales": 13400, "by new customers": 0.28},
      {"month": "Nov" , "sales": 13800, "by new customers": 0.2},
      {"month": "Dec" , "sales": 1000, "by new customers": 0.2}
    ]
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "month",
          "type": "nominal",
          "sort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "y": {"field": "sales", "type": "quantitative"},
        "color": {"datum": "sales", "type": "nominal"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "month",
          "type": "nominal",
          "sort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "y": {
          "field": "by new customers",
          "type": "quantitative",
          "axis": null // 隐藏次级Y轴
        },
        "color": {"datum": "by new customers", "type": "nominal"}
      }
    }
  ],
  "resolve": {
    "scale": {"y": "independent"}
  }
}

关键修改点：

• 替换repeat为layer数组，分别定义两个折线图层
• 在第二个图层的y编码里添加"axis": null，隐藏该轴
• 保留每个图层的color编码，确保图例正常显示

二、不使用fold方法缩放百分比数值 #

可以通过以下两种方式实现：

方法1：数据变换（Calculate） #

在数据源里添加transform，提前计算缩放后的百分比数值，后续直接用这个新字段绘图：

{
  "autosize": "fit",
  "title": {"text": "a layered chart using Vega-Lite", "frame": "group"},
  "data": {
    "name": "thedata",
    "values": [/* 原数据不变 */],
    "transform": [
      // 按销售最大值（比如14000）缩放百分比，让折线和销售曲线范围匹配
      {"calculate": "datum['by new customers'] * 14000", "as": "scaled_new_customers"}
    ]
  },
  "layer": [
    {/* sales图层不变 */},
    {
      "mark": "line",
      "encoding": {
        "x": {/* x轴设置不变 */},
        "y": {
          "field": "scaled_new_customers", // 用缩放后的字段
          "type": "quantitative",
          "axis": null
        },
        "color": {"datum": "by new customers", "type": "nominal"}
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

方法2：直接在编码中使用表达式（Expr） #

不用提前处理数据，直接在y编码里用表达式计算缩放值：

{
  // ...其他设置不变
  "layer": [
    {/* sales图层不变 */},
    {
      "mark": "line",
      "encoding": {
        "x": {/* x轴设置不变 */},
        "y": {
          "expr": "datum['by new customers'] * 14000", // 直接计算缩放值
          "type": "quantitative",
          "axis": null
        },
        "color": {"datum": "by new customers", "type": "nominal"}
      }
    }
  ]
}

两种方法都不需要用到fold，可以灵活调整缩放系数（比如14000可以换成你需要的最大值），让百分比折线和销售折线的视觉范围匹配。

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