Plotly JavaScript子图多轨迹多Y轴显示异常排查求助

需求：创建上下两个子图，上方子图包含3条轨迹（每条对应独立Y轴），下方子图包含2条轨迹（每条对应独立Y轴）。

遇到两种异常：

• 第一种布局配置：坐标轴显示符合预期，但每个子图仅最后一条轨迹可见
• 第二种布局配置：所有5条轨迹和坐标轴均显示，但全部内容叠加在单个子图中，未按domain设置分成两个子图

第一种异常布局代码 #

// Create data for the first subplot (three traces)
const trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  yaxis: 'y1', // Assign to the first y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 1'
};

const trace2 = {
  x: [1, 2, 3],
  y: [6, 5, 4],
  yaxis: 'y2', // Assign to the second y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 2'
};

const trace3 = {
  x: [1, 2, 3],
  y: [2, 1, 2],
  yaxis: 'y3', // Assign to the third y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 3'
};

// Create data for the second subplot (two traces)
const trace4 = {
  x: [1, 2, 3],
  y: [8, 9, 10],
  yaxis: 'y4', // Assign to the fourth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 1'
};

const trace5 = {
  x: [1, 2, 3],
  y: [10, 9, 7],
  yaxis: 'y5', // Assign to the fifth y-axis
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 2'
};

// Define layout for the subplots with individual y-axes
const layout = {
  title: 'Two Subplots with Different Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1}, 
  xaxis: {range: [0, 5], domain: [0.1, 0.9]}, // Adjust x-axis domain to make space for the y-axis text
  yaxis: {range: [0, 10],title: 'Y-axis 1', side: 'left', position:0, anchor: 'free' ,
          domain: [0.7,1.0]}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2',  side: 'right', position: 0.95, anchor: 'free',
          domain: [0.7,1.0]}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', anchor: 'free',  side: 'left', position: 0.08,
          domain: [0.7,1.0]}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', anchor: 'free',   position: 0.00, domain: [0.0,0.5]}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', position: 0.08, 
           anchor: 'free', domain: [0.0,0.5]}, // Y-axis 5 with manual position
};

// Create the subplots
const traces = [trace1, trace2, trace3, trace4, trace5];

Plotly.newPlot('myDiv', traces, layout);

第二种异常布局代码 #

const layout = {
  title: 'Two Subplots with Traces and Individual Y-Axes',
  grid: {rows: 2, columns: 1},
  subplots: [['xy'], ['xy']],
  xaxis: {domain: [0.2, 1.0]}, // Adjust x-axis domain
  yaxis: {title: 'Y-axis 1', domain: [0.7, 1.0], anchor: 'x', side: 'left'}, // Y-axis 1 with manual position
  yaxis2: {title: 'Y-axis 2', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 2 with manual position
  yaxis3: {title: 'Y-axis 3', domain: [0.7, 1.0], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 3 with manual position
  yaxis4: {title: 'Y-axis 4', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.1}, // Y-axis 4 with manual position
  yaxis5: {title: 'Y-axis 5', domain: [0.0, 0.5], anchor: 'free', overlaying: 'y', side: 'left', position: 0.2}, // Y-axis 5 with manual position
};

调试及修正方案 #

核心问题分析 #

两种布局的共同错误是未给轨迹指定对应子图的X轴，且坐标轴的anchor属性配置错误，导致轨迹和坐标轴无法正确绑定到对应的子图区域。

具体修正步骤 #

1. 给每个轨迹指定对应子图的X轴：

   • 上方3条轨迹（trace1、trace2、trace3）绑定到X轴x（可显式设置xaxis: 'x'）
   • 下方2条轨迹（trace4、trace5）必须显式设置xaxis: 'x2'，绑定到下方子图的X轴

2. 正确配置坐标轴的anchor属性：

   • 每个子图内的所有Y轴必须锚定到该子图的X轴，而非free：
     • 上方子图的yaxis、yaxis2、yaxis3设置anchor: 'x'
     • 下方子图的yaxis4、yaxis5设置anchor: 'x2'

3. 合理使用overlaying属性：

   • 同一子图内的额外Y轴需要设置overlaying为该子图的主Y轴，确保轨迹叠加在同一子图区域：
     • 上方子图的yaxis2、yaxis3设置overlaying: 'y'
     • 下方子图的yaxis5设置overlaying: 'y4'

修正后的完整代码 #

// 上方子图3条轨迹
const trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  xaxis: 'x',
  yaxis: 'y',
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 1'
};

const trace2 = {
  x: [1, 2, 3],
  y: [6, 5, 4],
  xaxis: 'x',
  yaxis: 'y2',
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 2'
};

const trace3 = {
  x: [1, 2, 3],
  y: [2, 1, 2],
  xaxis: 'x',
  yaxis: 'y3',
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 1 Trace 3'
};

// 下方子图2条轨迹
const trace4 = {
  x: [1, 2, 3],
  y: [8, 9, 10],
  xaxis: 'x2',
  yaxis: 'y4',
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 1'
};

const trace5 = {
  x: [1, 2, 3],
  y: [10, 9, 7],
  xaxis: 'x2',
  yaxis: 'y5',
  type: 'scatter',
  mode: 'lines',
  name: 'Subplot 2 Trace 2'
};

const layout = {
  title: 'Two Subplots with Individual Y-Axes',
  grid: {rows: 2, columns: 1, rowgap: 0.15}, // 增加行间距避免重叠
  // 上方子图X轴
  xaxis: {range: [0, 5], domain: [0.15, 0.9]},
  // 上方子图Y轴（主）
  yaxis: {title: 'Y-axis 1', side: 'left', position: 0.05, anchor: 'x', domain: [0.6, 1]},
  // 上方子图额外Y轴
  yaxis2: {title: 'Y-axis 2', side: 'right', position: 0.95, anchor: 'x', overlaying: 'y', domain: [0.6, 1]},
  yaxis3: {title: 'Y-axis 3', side: 'left', position: 0.12, anchor: 'x', overlaying: 'y', domain: [0.6, 1]},
  // 下方子图X轴
  xaxis2: {range: [0, 5], domain: [0.15, 0.9]},
  // 下方子图Y轴（主）
  yaxis4: {title: 'Y-axis 4', side: 'left', position: 0.05, anchor: 'x2', domain: [0, 0.45]},
  // 下方子图额外Y轴
  yaxis5: {title: 'Y-axis 5', side: 'left', position: 0.12, anchor: 'x2', overlaying: 'y4', domain: [0, 0.45]}
};

Plotly.newPlot('myDiv', [trace1, trace2, trace3, trace4, trace5], layout);

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