如何使用Plotly.js实现不同Y轴折线图垂直堆叠

这个场景不需要拆分多个独立子图，直接通过多Y轴+垂直域分配就能实现，完美适配不同折线Y轴值域差异大的需求，支持任意数量折线等高度堆叠。

核心实现逻辑 #

• 所有折线序列绑定同一个X轴，保证横轴坐标完全对齐
• 为每条折线单独配置独立Y轴，各Y轴单独设置数值范围，互不干扰
• 通过Y轴的domain参数，给每个轴分配垂直方向的等比高度，轴之间留少量间隙避免标签、折线重叠
• 非边缘位置的Y轴可以将刻度标签放在右侧，避免左侧标签堆叠

可直接复用的代码示例（3条折线版本） #

// 3条测试数据，值域差异覆盖3个数量级
const traces = [
  {
    x: Array.from({length: 20}, (_,i) => i+1),
    y: Array.from({length: 20}, () => Math.random()*20), // 值域0-20
    type: 'scatter',
    name: '小值域指标',
    yaxis: 'y'
  },
  {
    x: Array.from({length: 20}, (_,i) => i+1),
    y: Array.from({length: 20}, () => 800 + Math.random()*700), // 值域800-1500
    type: 'scatter',
    name: '中值域指标',
    yaxis: 'y2'
  },
  {
    x: Array.from({length: 20}, (_,i) => i+1),
    y: Array.from({length: 20}, () => Math.random()), // 值域0-1
    type: 'scatter',
    name: '大比例指标',
    yaxis: 'y3'
  }
];

const layout = {
  xaxis: {
    domain: [0, 0.92], // 预留8%宽度给右侧Y轴标签
    anchor: 'y3'
  },
  // 顶部Y轴：占顶部1/3高度
  yaxis: {
    domain: [0.68, 1],
    title: '小值域指标',
    range: [0, 20]
  },
  // 中间Y轴：占中间1/3高度，标签放右侧
  yaxis2: {
    domain: [0.34, 0.66],
    title: '中值域指标',
    range: [800, 1500],
    side: 'right',
    showgrid: false
  },
  // 底部Y轴：占底部1/3高度
  yaxis3: {
    domain: [0, 0.32],
    title: '大比例指标',
    range: [0, 1]
  },
  height: 700,
  margin: {l: 60, r: 60, t: 20, b: 50},
  legend: {orientation: 'h', y: 1.05}
};

// 渲染到指定DOM节点
Plotly.newPlot('yourChartContainer', traces, layout);

2条折线快速适配 #

只需要保留2条trace和对应的2个Y轴配置，调整domain参数即可：

• 顶部Y轴domain: [0.52, 1]
• 底部Y轴domain: [0, 0.48]
  两个轴之间留0.04的间隙足够避免内容重叠。

调优注意事项 #

• domain取值范围为0~1，0对应绘图区最底部，1对应最顶部，计算高度时必须预留间隙，否则相邻折线和轴标签会重叠
• 每个Y轴的range请根据对应数据的实际极值设置，保证折线撑满分配到的高度区域
• 如果需要网格线统一对齐，给所有Y轴设置相同的nticks参数即可
• 折线数量超过3条时，按单轴高度 = (1 - 间隙总和)/折线数计算每个轴的domain区间，左右两侧交替放置Y轴标签即可

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