如何正确调整JavaScript标签页中封装的所有Plotly图表尺寸？

Plotly图表渲染时会读取所在容器的实时宽度，而tabbis.js默认用display: none隐藏非激活标签页，此时容器宽度为0，图表会按这个宽度渲染；切换标签页后，图表不会自动检测容器宽度变化，导致显示缩小。

方法1：修改tabbis.js的隐藏逻辑（推荐） #

不用display: none隐藏面板，改用visibility和绝对定位，让渲染时容器保留宽度：

.tabbis-panel[aria-hidden="true"] {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.tabbis-panel[aria-hidden="false"] {
  visibility: visible;
  position: static;
  width: auto;
  height: auto;
}

把这段CSS放到RMarkdown的头部（比如通过output: html_document: css参数），或者用htmltools::tags$style()直接插入。

方法2：监听标签页切换事件，触发Plotly重绘 #

利用tabbis.js的tabbis:show事件，切换标签页时强制重绘图表：

document.addEventListener('tabbis:show', function(event) {
  // 获取当前激活面板里的所有Plotly图表
  const plots = event.target.querySelectorAll('.plotly');
  plots.forEach(function(plot) {
    // 重设宽度为100%，触发自适应
    Plotly.relayout(plot, {width: '100%'});
  });
});

用htmltools::tags$script()把这段JS插入到RMarkdown页面中。

不用手动集成tabbis.js，R生态里有现成的标签页组件，能自动适配Plotly图表：

方案1：用shiny的tabsetPanel #

直接在RMarkdown中使用shiny的标签页组件，无需额外处理宽度问题：

---
title: "自适应标签页示例"
output: html_document
---

```{r setup, include=FALSE}
library(plotly)
library(shiny)

# 生成Plotly图表
plot1 <- plot_ly(mtcars, x = ~wt, y = ~mpg, type = "scatter")
plot2 <- plot_ly(mtcars, x = ~hp, y = ~qsec, type = "scatter")

# 创建标签页
tabsetPanel(
  tabPanel("图表1", plot1),
  tabPanel("图表2", plot2)
)

方案2：用bs4Dash的标签页（Bootstrap风格） #

如果想要更美观的Bootstrap样式标签页，用bs4Dash包：

---
title: "Bootstrap标签页示例"
output: html_document
---

```{r setup, include=FALSE}
library(plotly)
library(bs4Dash)

plot1 <- plot_ly(mtcars, x = ~wt, y = ~mpg, type = "scatter")
plot2 <- plot_ly(mtcars, x = ~hp, y = ~qsec, type = "scatter")

tabsetPanel(
  tabPanel("图表1", plot1),
  tabPanel("图表2", plot2),
  type = "tabs"
)

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