Shiny应用中Plotly图表标题自适应避免截断的实现方法

下面提供几种让Plotly标题自适应图表尺寸、避免截断的方案，结合你的示例代码修改：

1. 开启标题自动换行与自适应布局 #

在layout的title参数中添加automargin = TRUE让标题自动调整边距，同时设置自动对齐参数，也可按需调整字体大小缓解截断问题：

plot <- plot_ly(m, x = m$Percent, y = rownames(m), type = "bar",
                orientation = "h",
                marker = list(color = '#10367a')) %>%
  layout(title = list(
    text = "Too long title. It's cropped and i want that it is automatically re ajusted to be diplayed !",
    automargin = TRUE,  # 自动调整标题边距，避免被截断
    xanchor = "auto",   # 自动水平对齐
    yanchor = "auto",   # 自动垂直对齐
    font = list(size = 14)  # 可根据容器大小调整字体尺寸
  ),
  xaxis = list(title ="x axis", range = c(0, 100)),
  yaxis = list(title = "y axis"),
  showlegend = FALSE)

2. 结合Shiny实现响应式动态调整 #

如果是在Shiny应用中，可以通过两种方式实现标题的响应式适配：

方法一：监听窗口大小动态调整字体 #

在Shiny的UI中添加自定义JavaScript，当窗口尺寸变化时自动调整标题字体大小：

library(shiny)
library(plotly)

ui <- fluidPage(
  tags$script(HTML('
    $(window).resize(function() {
      var plot = document.getElementById("myPlot");
      if (plot) {
        var containerWidth = plot.offsetWidth;
        // 根据容器宽度动态计算标题字体大小
        var titleFontSize = Math.max(12, Math.floor(containerWidth / 30));
        Plotly.relayout(plot, "title.font.size", titleFontSize);
      }
    });
  ')),
  plotlyOutput("myPlot")
)

server <- function(input, output) {
  output$myPlot <- renderPlotly({
    plot_ly(m, x = m$Percent, y = rownames(m), type = "bar",
            orientation = "h",
            marker = list(color = '#10367a')) %>%
      layout(title = list(
        text = "Too long title. It's cropped and i want that it is automatically re ajusted to be diplayed !",
        automargin = TRUE
      ),
      xaxis = list(title ="x axis", range = c(0, 100)),
      yaxis = list(title = "y axis"),
      showlegend = FALSE)
  })
}

shinyApp(ui, server)

方法二：自动拆分长标题为多行 #

用R函数将长标题按字符数拆分，自动插入<br>标签实现换行：

# 定义标题自动换行函数
wrap_title <- function(title, max_chars_per_line = 30) {
  words <- strsplit(title, " ")[[1]]
  lines <- c()
  current_line <- ""
  for (word in words) {
    if (nchar(paste(current_line, word)) <= max_chars_per_line) {
      current_line <- paste(current_line, word)
    } else {
      lines <- c(lines, trimws(current_line))
      current_line <- word
    }
  }
  lines <- c(lines, trimws(current_line))
  paste(lines, collapse = "<br>")
}

# 处理长标题
long_title <- "Too long title. It's cropped and i want that it is automatically re ajusted to be diplayed !"
wrapped_title <- wrap_title(long_title)

# 生成图表
plot <- plot_ly(m, x = m$Percent, y = rownames(m), type = "bar",
                orientation = "h",
                marker = list(color = '#10367a')) %>%
  layout(title = list(
    text = wrapped_title,
    automargin = TRUE
  ),
  xaxis = list(title ="x axis", range = c(0, 100)),
  yaxis = list(title = "y axis"),
  showlegend = FALSE)

3. 手动调整图表顶部边距 #

通过layout的margin参数增加顶部空间，给长标题预留足够显示区域：

plot <- plot_ly(m, x = m$Percent, y = rownames(m), type = "bar",
                orientation = "h",
                marker = list(color = '#10367a')) %>%
  layout(title = list(
    text = "Too long title. It's cropped and i want that it is automatically re ajusted to be diplayed !"
  ),
  xaxis = list(title ="x axis", range = c(0, 100)),
  yaxis = list(title = "y axis"),
  showlegend = FALSE,
  margin = list(t = 80)  # t代表顶部边距，数值越大预留空间越多
)

以上方法可单独或组合使用，确保标题在不同屏幕尺寸和长度下都能完整显示。

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