如何让R Shiny中的Plotly choropleth宽度填满容器并呈矩形？

你的问题核心是Plotly的geo布局默认带有固定宽高比，导致即使设置了容器宽度，图表仍会保持近似正方形，无法充分利用空间。以下是两种可行的解决方法：

方法一：通过Plotly布局参数调整 #

修改layout中的配置，让地图适配容器宽度并调整宽高比：

library(shiny)
library(plotly)

country_data <- data.frame(
  country_short = c("DEU", "USA", "BRA", "CAN", "MEX"),
  points = c(10, 20, 30, 40, 50)
)

ui <- fluidPage(
  div(style="width:1400px",
      plotlyOutput("choro")
  )
)

server <- function(input, output, session) {
  output$choro <- renderPlotly({
    plot_ly(country_data, 
            type = "choropleth",
            z = ~ points, 
            locations = ~ country_short,
            marker = list(
              line = list(
                color = "white"
              )
            ),
            showscale = F
    ) %>%
      layout(
        autosize = TRUE, # 让图表自动适应容器宽度
        height = 600, # 设置高度，配合1400px宽度形成矩形比例
        geo = list(
          landcolor = rgb(0.9, 0.9, 0.9),
          countrycolor = "white",
          coastlinecolor = "white",
          showland = T,
          showcountries = T,
          showframe = F,
          projection = list(type = "Mercator", scale = 0.7), # 调整缩放比例，让地图适配宽度
          fitbounds = "locations", # 让地图自动适配数据中的国家位置
          margin = list(l = 0, r = 0, t = 0, b = 0) # 移除所有边距，最大化利用空间
        )
      )
  }) 
}

shinyApp(ui, server)

关键调整点：

• autosize = TRUE：让图表自动匹配容器宽度
• height：手动设置高度，定义你需要的矩形比例
• geo$projection$scale：调整地图缩放级别，避免内容溢出或留白过多
• fitbounds = "locations"：确保地图自动居中并适配数据中的国家范围

方法二：通过CSS强制控制尺寸 #

直接用CSS定义容器和图表的宽高，同时禁用Plotly的自动尺寸调整：

library(shiny)
library(plotly)

country_data <- data.frame(
  country_short = c("DEU", "USA", "BRA", "CAN", "MEX"),
  points = c(10, 20, 30, 40, 50)
)

ui <- fluidPage(
  div(style="width:1400px; height:600px;", # 固定容器宽高
      plotlyOutput("choro", width = "100%", height = "100%") # 图表占满容器
  )
)

server <- function(input, output, session) {
  output$choro <- renderPlotly({
    plot_ly(country_data, 
            type = "choropleth",
            z = ~ points, 
            locations = ~ country_short,
            marker = list(
              line = list(
                color = "white"
              )
            ),
            showscale = F
    ) %>%
      layout(
        autosize = FALSE, # 禁用Plotly自动尺寸，依赖CSS设置
        geo = list(
          landcolor = rgb(0.9, 0.9, 0.9),
          countrycolor = "white",
          coastlinecolor = "white",
          showland = T,
          showcountries = T,
          showframe = F,
          projection = list(type = "Mercator"),
          margin = list(l = 0, r = 0, t = 0, b = 0)
        )
      )
  }) 
}

shinyApp(ui, server)

关键调整点：

• 在UI层用CSS固定容器的宽高，并让plotlyOutput占满容器
• autosize = FALSE：阻止Plotly覆盖CSS设置的尺寸

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