PowerBI中用Vega-Lite Deneb实现双Y轴网格线对齐

问题描述 #

我想让右侧Y轴使用和左侧Y轴完全一致的网格线，但一直没找到可行方案。因为数据范围会随仪表板选择动态变化，没法用固定定义域；而且两个Y轴单位不同，同步轴会有问题。当前图表效果如下：

当前使用的Vega-Lite代码：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "Bezeichner",
      "type": "nominal",
      "axis": {
        "title": "",
        "labelAngle": 0,
        "labelAlign": "center",
        "labelBaseline": "middle",
        "labelLineHeight": 15,
        "labelFontSize": 16,
        "labelPadding": 13,
        "labelLimit": 500,
        "labelExpr": "split(datum.label, ';')",
        "ticks": false,
        "labelColor": "#ffffff",
        "labelFont": "Roboto"
      }
    }
  },
  "transform": [
    { "calculate": "replace(datum.Bezeichner, /;\\s*/g, '\\n')", "as": "Bezeichner_tt" },
    { "calculate": "format(datum.LCC, ',.0f') + ' T€/a'", "as": "LCC_tt" },
    { "calculate": "format(datum.LCA, ',.0f') + ' t/a'", "as": "LCA_tt" }
  ],
  "layer": [
    {
      "mark": {"type": "bar", "opacity": 1},
      "encoding": {
        "y": {
          "field": "LCC",
          "type": "quantitative",
          "axis": {
            "title": "",
            "titleColor": "#ffffff",
            "orient": "right",
            "labelFontSize": 16,
            "labelFont": "Roboto",
            "labelPadding": 10,
            "labelColor": "#ffffff",
            "grid": false,
            "domain": false,
            "ticks": false,
            "tickCount": 3,
            "labelExpr": "format(datum.value, ',.0f') + ' T€/a'",
            "labelFontWeight": "bold"
          }
        },
        "xOffset": {"value": 57},
        "color": {"value": "#118DFF"},
        "tooltip": [
          { "field": "Bezeichner_tt", "type": "nominal", "title": "Bezeichner" },
          { "field": "LCC_tt", "type": "nominal", "title": "LCC" },
          { "field": "LCA_tt", "type": "nominal", "title": "LCA" }
        ]
      }
    },
    {
      "mark": {"type": "bar", "opacity": 1},
      "encoding": {
        "y": {
          "field": "LCA",
          "type": "quantitative",
          "axis": {
            "title": "",
            "orient": "left",
            "titleColor": "#ffffff",
            "grid": true,
            "labelFontSize": 16,
            "labelFont": "Roboto",
            "labelPadding": 10,
            "labelColor": "#ffffff",
            "tickCount": 3,
            "ticks": true,
            "domain": false,
            "labelExpr": "format(datum.value, ',.0f') + ' t/a'",
            "labelFontWeight": "bold"
          }
        },
        "xOffset": {"value": 8},
        "color": {"value": "#AAE574"},
        "tooltip": [
          { "field": "Bezeichner_tt", "type": "nominal", "title": "Bezeichner" },
          { "field": "LCC_tt", "type": "nominal", "title": "LCC" },
          { "field": "LCA_tt", "type": "nominal", "title": "LCA" }
        ]
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}},
  "config": {
    "background": null,
    "view": {"stroke": null, "fill": null},
    "axis": {
      "labelColor": "#ffffff",
      "titleColor": "#ffffff"
    },
    "bar": {"size": 50},
    "scale": {
      "bandPaddingInner": 0.845,
      "bandPaddingOuter": 0.5
    }
  }
}

解决方案 #

要在动态数据、不同单位的双Y轴场景下实现网格线完全对齐，可通过以下修改实现：

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "Bezeichner",
      "type": "nominal",
      "axis": {
        "title": "",
        "labelAngle": 0,
        "labelAlign": "center",
        "labelBaseline": "middle",
        "labelLineHeight": 15,
        "labelFontSize": 16,
        "labelPadding": 13,
        "labelLimit": 500,
        "labelExpr": "split(datum.label, ';')",
        "ticks": false,
        "labelColor": "#ffffff",
        "labelFont": "Roboto"
      }
    }
  },
  "transform": [
    {"calculate": "replace(datum.Bezeichner, /;\\s*/g, '\\n')", "as": "Bezeichner_tt"},
    {"calculate": "format(datum.LCC, ',.0f') + ' T€/a'", "as": "LCC_tt"},
    {"calculate": "format(datum.LCA, ',.0f') + ' t/a'", "as": "LCA_tt"}
  ],
  "layer": [
    // 基于左侧Y轴刻度绘制统一网格线
    {
      "mark": {"type": "rule", "stroke": "#ccc", "strokeWidth": 1},
      "encoding": {
        "y": {
          "field": "LCA",
          "type": "quantitative",
          "scale": {"name": "yLeft"},
          "axis": null,
          "value": {"signal": "sequence(0, 1, 1/3)"}
        }
      }
    },
    {
      "mark": {"type": "bar", "opacity": 1},
      "encoding": {
        "y": {
          "field": "LCC",
          "type": "quantitative",
          "axis": {
            "title": "",
            "titleColor": "#ffffff",
            "orient": "right",
            "labelFontSize": 16,
            "labelFont": "Roboto",
            "labelPadding": 10,
            "labelColor": "#ffffff",
            "grid": false,
            "domain": false,
            "ticks": false,
            "tickCount": {"signal": "length(scales('yLeft').ticks)"},
            "labelExpr": "format(datum.value, ',.0f') + ' T€/a'",
            "labelFontWeight": "bold"
          }
        },
        "xOffset": {"value": 57},
        "color": {"value": "#118DFF"},
        "tooltip": [
          {"field": "Bezeichner_tt", "type": "nominal", "title": "Bezeichner"},
          {"field": "LCC_tt", "type": "nominal", "title": "LCC"},
          {"field": "LCA_tt", "type": "nominal", "title": "LCA"}
        ]
      }
    },
    {
      "mark": {"type": "bar", "opacity": 1},
      "encoding": {
        "y": {
          "field": "LCA",
          "type": "quantitative",
          "scale": {"name": "yLeft"},
          "axis": {
            "title": "",
            "orient": "left",
            "titleColor": "#ffffff",
            "grid": true,
            "labelFontSize": 16,
            "labelFont": "Roboto",
            "labelPadding": 10,
            "labelColor": "#ffffff",
            "tickCount": 3,
            "ticks": true,
            "domain": false,
            "labelExpr": "format(datum.value, ',.0f') + ' t/a'",
            "labelFontWeight": "bold"
          }
        },
        "xOffset": {"value": 8},
        "color": {"value": "#AAE574"},
        "tooltip": [
          {"field": "Bezeichner_tt", "type": "nominal", "title": "Bezeichner"},
          {"field": "LCC_tt", "type": "nominal", "title": "LCC"},
          {"field": "LCA_tt", "type": "nominal", "title": "LCA"}
        ]
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}},
  "config": {
    "background": null,
    "view": {"stroke": null, "fill": null},
    "axis": {
      "labelColor": "#ffffff",
      "titleColor": "#ffffff"
    },
    "bar": {"size": 50},
    "scale": {
      "bandPaddingInner": 0.845,
      "bandPaddingOuter": 0.5
    }
  }
}

核心修改点 #

1. 为左侧Y轴Scale命名：给左侧Y轴的scale指定名称yLeft，方便后续引用其刻度信息
2. 同步右侧轴刻度数量：右侧Y轴的tickCount通过信号length(scales('yLeft').ticks)动态获取左侧的刻度数量，确保两者刻度线位置对齐
3. 统一网格线绘制：添加一个规则标记层，基于左侧轴的刻度位置绘制水平网格线，替代右侧轴的网格线，保证视觉上完全一致
4. 保留左侧网格线配置：左侧轴保留网格线显示，右侧轴关闭网格线，避免重复

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