R Markdown中Flexdashboard网格布局Tabset内Plotly图表截断问题

完全可以通过自定义CSS解决这个问题。默认的tabset组件自带内边距和固定高度的标签栏，挤占了图表的可用空间，调整CSS规则就能让图表充分利用网格区域的空间。

具体解决方案 #

在flexdashboard开头添加自定义CSS代码，调整tab容器和图表的布局：

/* 调整tab内容区域高度，减去标签栏高度，清除内边距 */
.tab-content {
  height: calc(100% - 40px);
  padding: 0;
}

/* 减少标签栏顶部空白 */
.nav-tabs {
  margin-top: 0;
  padding-top: 0;
}

/* 强制Plotly图表占满父容器高度 */
.plotly.html-widget {
  height: 100% !important;
}

修改后的完整代码 #

---
title: "Prueba Tabs"
output: flexdashboard::flex_dashboard
---

.tab-content {
  height: calc(100% - 40px);
  padding: 0;
}

.nav-tabs {
  margin-top: 0;
  padding-top: 0;
}

.plotly.html-widget {
  height: 100% !important;
}

library(flexdashboard)
require(shinydashboard)
require(shiny)
require(plotly)

Row #

Gráfico A #

plot_ly(data = cars, x = ~speed, y = ~dist, mode = "markers")

Gráfico B #

plot_ly(data = mtcars, x = ~mpg, y = ~hp, type = "scatter", mode = "markers")

Row #

Gráfico C #

plot_ly(data = iris, x = ~Sepal.Length, y = ~Sepal.Width, color = ~Species, type = 'scatter', mode = 'markers')

Gráfico D #

tabsetPanel(
  tabPanel("Gráfico 1", {
    plot_ly(data = cars, x = ~speed, y = ~dist, mode = "markers")
  }),
  tabPanel("Gráfico 2", {
    plot_ly(data = iris, x = ~Sepal.Length, y = ~Sepal.Width, color = ~Species, type = 'scatter', mode = 'markers')
  }),
  tabPanel("Gráfico 3", {
    plot_ly(data = mtcars, x = ~mpg, y = ~hp, type = "scatter", mode = "markers")
  })
)

补充说明 #

• calc(100% - 40px) 是根据标签栏默认高度计算的，若你的标签栏高度不同，可自行调整数值
• !important 用于强制覆盖Plotly默认高度样式，确保图表占满容器
• 调整后，tab内容区域会自动填充网格可用空间，图表也会自适应该区域高度

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