Plotly图表嵌入HTML后切换div显示时的显示异常求助

• 替换display:none的隐藏方式：别用display:none藏div，换成visibility:hidden+height:0+overflow:hidden的组合。这种方式下容器仍保留布局空间，Plotly渲染时能正确计算尺寸，切换显示时只需把visibility改回visible、height设为auto或固定值即可。
  示例样式代码：

  .hidden-chart {
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
  .visible-chart {
    visibility: visible;
    height: auto; /* 或你需要的固定高度 */
  }
  

• 切换后强制触发Plotly重绘：如果必须保留display:none，那在切换显示div之后，调用Plotly的relayout方法强制重绘图表，指定正确的尺寸参数。
  示例JS代码：

  // 假设目标图表容器id为chart2
  document.getElementById('chart2').style.display = 'flex';
  // 强制重绘并指定尺寸
  Plotly.relayout('chart2', {
    width: '100%', // 或你的容器宽度
    height: 600 // 或你的容器高度
  });
  

• 延迟初始化隐藏图表：放弃一开始就渲染所有图表的逻辑，只初始化当前显示的图表；当切换到其他div时，再初始化对应图表（未初始化过的话）。避免隐藏容器里的图表在无布局信息时渲染出错。
  示例思路代码：

  // 预存所有图表的配置数据，不提前渲染
  const chartConfigs = {
    chart1: { /* 图表1的data和layout配置 */ },
    chart2: { /* 图表2的data和layout配置 */ }
  };
  
  function showChart(chartId) {
    // 先隐藏所有图表容器
    document.querySelectorAll('.chart-container').forEach(el => {
      el.style.display = 'none';
    });
    const targetEl = document.getElementById(chartId);
    targetEl.style.display = 'flex';
    // 未初始化则渲染图表
    if (!targetEl.classList.contains('initialized')) {
      Plotly.newPlot(targetEl, chartConfigs[chartId].data, chartConfigs[chartId].layout);
      targetEl.classList.add('initialized');
    }
  }
  

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