本文详解如何在 plotly.js 中正确配置多个子图（subplots）并为每个子图分配多个独立 y 轴，重点解决因 anchor、overlaying 和 domain 设置不当导致的轨迹不显示、轴重叠或布局错乱等常见问题。
本文详解如何在 plotly.js 中正确配置多个子图（subplots）并为每个子图分配多个独立 y 轴，重点解决因 anchor、overlaying 和 domain 设置不当导致的轨迹不显示、轴重叠或布局错乱等常见问题。
在 Plotly.js 中实现「多子图 + 每子图多 Y 轴」是一个高频但易出错的需求。许多开发者（如提问者）会发现：尽管为每条 trace 显式指定了 yaxis: 'yN'，且 layout 中定义了多个 yaxis 对象，最终却仅有每个子图的最后一条 trace 渲染成功——其余轨迹“消失”。这并非数据或类型错误，而是 Plotly 坐标系绑定机制未被正确理解所致。
核心原理在于：Plotly 不通过 domain 自动划分子图空间；它依赖 xaxis/yaxis 之间的显式锚定（anchor）与叠加（overlaying）关系来构建逻辑坐标系网格。 单纯设置 yaxisN.domain 只控制该轴自身的垂直占比，无法将其绑定到特定子图区域；若未指定 anchor（如 yaxis2: {anchor: 'x2'}），Plotly 默认将所有未锚定的 yaxis 关联到首个 xaxis（即 xaxis），导致所有轨迹挤入同一子图区域，后绘制的 trace 覆盖先绘制的 trace。
✅ 正确做法是：
- 为每个子图分配独立的 xaxis 和 yaxis 组合（如 x/y、x2/y2、x3/y3 等）；
- 使用 anchor 显式声明坐标系归属：每个 yaxis 必须 anchor 到其对应子图的 xaxis（如 y2: {anchor: 'x2'}）；
- 多 Y 轴共存于同一子图时，必须启用 overlaying：后续 Y 轴需设置 overlaying: 'yN'（如 y5: {overlaying: 'y4', anchor: 'free'}），并配合 side 与 position 精确定位；
- domain 应作用于 xaxis/yaxis 对，而非单个轴：通过调整 xaxis.domain 和 yaxis.domain 共同划定子图可视区域。
以下是一个经过验证的完整示例，实现：
- 上方两个并列子图（各含 2 条共享 Y 轴的 trace）；
- 下方一个宽幅子图（含 4 条 trace，分别绑定 4 个 Y 轴：1 个主左轴 + 3 个叠加轴——左/右/右偏移）。
const layout = {
width: 900,
height: 600,
title: {
text: '多子图 × 多Y轴：并列双图 + 底部四轴复合图',
x: 0.5
},
// 定义 2×2 网格布局（实际仅用前三格：[0,0], [0,1], [1,0:1]）
grid: { rows: 2, columns: 2 },
// 子图1：左上（x/y）
xaxis: { anchor: 'y', domain: [0.00, 0.45] },
yaxis: { anchor: 'x', domain: [0.575, 1.0] },
// 子图2：右上（x2/y2）
xaxis2: { anchor: 'y2', domain: [0.55, 1.00] },
yaxis2: { anchor: 'x2', domain: [0.575, 1.0] },
// 子图3：底部横跨（x3/y3 + 叠加 y4/y5/y6）
xaxis3: { anchor: 'y3', domain: [0.00, 0.45] }, // 左半区X轴
xaxis4: { anchor: 'y4', domain: [0.55, 1.00] }, // 右半区X轴（复用同一视觉区域）
yaxis3: { anchor: 'x3', domain: [0.00, 0.425] }, // 主左Y轴
yaxis4: { anchor: 'x4', domain: [0.00, 0.425] }, // 主右Y轴（与y3同域，但锚定x4）
yaxis5: {
anchor: 'free',
overlaying: 'y4',
side: 'left',
position: 0.5 // 左侧中间位置
},
yaxis6: {
anchor: 'x4',
overlaying: 'y4',
side: 'right' // 右侧默认位置
},
yaxis7: {
anchor: 'free',
overlaying: 'y4',
side: 'right',
position: 0.9 // 右侧偏移位置
}
};
// 子图1：两条 trace 共享 y 轴
const trace1a = { x: [0, 1], y: [2, 3], name: 'Top-Left A', xaxis: 'x', yaxis: 'y', type: 'scatter' };
const trace1b = { x: [0, 0.5, 1], y: [1, 4, 2], name: 'Top-Left B', xaxis: 'x', yaxis: 'y', type: 'scatter' };
// 子图2：两条 trace 共享 y2 轴
const trace2a = { x: [0, 1], y: [3, 2], name: 'Top-Right A', xaxis: 'x2', yaxis: 'y2', type: 'scatter' };
const trace2b = { x: [0, 0.5, 1], y: [2, 4, 1], name: 'Top-Right B', xaxis: 'x2', yaxis: 'y2', type: 'scatter' };
// 子图3：四条 trace 分属不同 Y 轴
const trace3a = { x: [1, 2, 3], y: [4, 5, 6], name: 'Bottom-Low', xaxis: 'x3', yaxis: 'y3', type: 'scatter' };
const trace4 = { x: [2, 3, 4], y: [40, 50, 60], name: 'Bottom-Med', xaxis: 'x4', yaxis: 'y4', type: 'scatter' };
const trace5 = { x: [4, 5, 6], y: [40000, 50000, 60000], name: 'Bottom-High-L', xaxis: 'x4', yaxis: 'y5', type: 'scatter' };
const trace6 = { x: [5, 6, 7], y: [35, 50, 60], name: 'Bottom-High-R', xaxis: 'x4', yaxis: 'y6', type: 'scatter' };
const trace7 = { x: [6, 7, 8], y: [1e6, 1.2e6, 1.1e6], name: 'Bottom-Extreme', xaxis: 'x4', yaxis: 'y7', type: 'scatter' };
const traces = [trace1a, trace1b, trace2a, trace2b, trace3a, trace4, trace5, trace6, trace7];
Plotly.newPlot('myDiv', traces, layout);? 关键注意事项：
- anchor: 'free' 仅用于叠加轴（overlaying）：当需要将 Y 轴置于非标准位置（如左侧中间、右侧偏移）时，必须设 anchor: 'free' 并配 position（0–1 归一化值），否则 Plotly 会忽略 position；
- 避免混用 domain 与 overlaying 冲突：若某 yaxis 同时设 domain 和 overlaying，Plotly 优先按 overlaying 规则布局，domain 可能失效；
- trace 必须显式声明 xaxis/yaxis 字段：即使 layout 中有默认 xaxis/yaxis，多子图场景下务必为每条 trace 指定所属坐标系标识符（如 xaxis: 'x3'）；
- 调试技巧：临时为各 yaxis 添加 showline: true, linewidth: 2, linecolor: 'red'，直观观察轴位置是否符合预期。
掌握这一套坐标系锚定范式后，你将能稳定构建任意复杂度的多子图多轴可视化——无论是金融多指标监控、工业传感器融合分析，还是科研多模态数据对比，均可精准表达。
