相同Vega-Lite规范在不同主机生成不同PNG输出的问题排查

我使用vl2png工具将以下Vega-Lite规范转换为PNG：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": {"type": "quantitative", "field": "Foo"}
  },
  "mark": "bar",
  "data": {
    "values": [
      {"category": "A", "Foo": 0.1},
      {"category": "B", "Foo": 0.7},
      {"category": "C", "Foo": 0.6}
    ]
  }
}

两台主机均运行Ubuntu 22.04、Node.js 18.5.0、vega-lite 5.6.0、vega 5.22.1、canvas 2.11.0，但生成的PNG结果存在差异：一台输出正常的柱状图，另一台的柱子被压缩成一条线，且X、Y轴标签未居中。转换为SVG时问题同样存在；将Vega-Lite规范转换为Vega规范后，两台主机生成的Vega代码完全一致，但调用vg2png转换仍得到不同的PNG。

可能原因及排查方向 #

• 系统字体差异：Vega渲染依赖系统字体，两台主机可能缺少相同的默认字体（如无衬线字体），导致布局计算异常。排查点：
  • 执行fc-list对比两台主机的已安装字体列表，重点核对常用无衬线字体（如Noto Sans、Arial等）是否一致
  • 在Vega规范中显式指定字体（比如添加"config": {"font": "Noto Sans"}），再测试渲染结果
• Canvas底层依赖库不一致：虽然canvas包版本同为2.11.0，但它依赖的系统底层库（如libcairo、libpango、libjpeg等）可能版本不同。排查点：
  • 执行dpkg -l | grep -E 'cairo|pango|jpeg'对比两台主机的这些库版本
  • 卸载现有canvas包后，执行npm install canvas --build-from-source重新编译，确保底层依赖一致
• 环境变量差异：NODE_ENV、语言环境（LANG、LC_ALL）等变量可能影响渲染逻辑。排查点：
  • 对比两台主机的env输出，重点检查语言和字符集相关变量
  • 在统一环境变量下执行渲染命令（如设置LC_ALL=en_US.UTF-8），观察结果是否一致
• 系统显示配置差异：无头环境下的DPI设置、硬件渲染配置可能影响布局计算。排查点：
  • 检查两台主机的DPI配置（执行xrdb -query | grep dpi，无头环境可查看系统级显示配置）
  • 在Vega规范中显式指定画布尺寸（添加"width": 400, "height": 300），避免自适应布局的计算偏差
• 依赖包缓存损坏：其中一台主机的npm包可能存在缓存损坏。排查点：
  • 删除node_modules和package-lock.json，重新执行npm install
  • 执行npm cache clean --force清除缓存后，重新安装所有依赖

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