Plotly子图使用visible: 'legendonly'属性时运行异常问题问询

你的代码存在两个核心逻辑错误：

• getLayout()方法重新计算子图坐标轴显示范围时，破坏了trace和对应坐标轴的绑定关系。Plotly每条trace默认固定绑定对应编号的xaxis/yaxis属性，如果你隐藏中间子图后直接给可见子图重新分配坐标轴编号，原有trace的绑定没有同步更新，就会出现trace和坐标轴错位、无渲染的问题。
• 你在更新布局时删除了隐藏子图对应的坐标轴配置，导致绑定了这些坐标轴的trace找不到渲染容器，自然无法显示。

不需要修改trace的坐标轴绑定，仅调整坐标轴的可见性和显示范围即可：

1. 保留初始生成的全部4组坐标轴配置，不要删除隐藏子图对应的坐标轴
2. 隐藏trace时，将对应坐标轴的visible属性设为false，同时把它的显示范围domain设为[0, 0]（不占用布局空间）
3. 按当前可见子图的数量，重新计算每个可见坐标轴的domain占比，按原有顺序排列
4. 调用Plotly.relayout更新所有坐标轴配置即可，不需要修改trace属性

修改后的核心逻辑参考：

function getLayout() {
  const visibleSubplots = _subPlots.filter(p => p.isVisible);
  const visibleCount = visibleSubplots.length;
  const perPlotWidth = visibleCount ? 1 / visibleCount : 0;
  const layout = {
    showlegend: true
  };
  // 逐个处理所有子图的坐标轴配置
  _subPlots.forEach((plot, index) => {
    const xAxisKey = index === 0 ? 'xaxis' : `xaxis${index + 1}`;
    const yAxisKey = index === 0 ? 'yaxis' : `yaxis${index + 1}`;
    // 隐藏的坐标轴直接设为不可见、不占空间
    if (!plot.isVisible) {
      layout[xAxisKey] = { visible: false, domain: [0, 0] };
      layout[yAxisKey] = { visible: false, domain: [0, 1] };
      return;
    }
    // 计算可见坐标轴的显示位置
    const currentVisibleIndex = visibleSubplots.findIndex(item => item.dataIndex === plot.dataIndex);
    const domainStart = currentVisibleIndex * perPlotWidth;
    const domainEnd = (currentVisibleIndex + 1) * perPlotWidth;
    layout[xAxisKey] = {
      visible: true,
      domain: [domainStart, domainEnd - 0.02] // 预留少量子图间距
    };
    layout[yAxisKey] = {
      visible: true,
      domain: [0, 1],
      anchor: xAxisKey.replace('axis', '')
    };
  });
  return layout;
}

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