如何拥有响应式标题并避免标题被裁剪？

Question

对于一个闪亮的应用程序，我生成多个绘图图形：标题根据用户选择的参数而变化。有时标题太长并且被切断，因此它们不完全可见。当屏幕尺寸改变时它们也会被切断。如何让标题适应图表大小并完全可见？

谢谢您的帮助。

# data for example :
m <- structure(list(Frequency = c(3826, 2766, 676, 337), Percent = c(50,36, 9, 4)), row.names = c("M1", "M2", "M3", "M4"), class = "data.frame")

# plot example 
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) 

Answer 1

...既然你说你正在使用 Shiny。

我不知道您的应用是什么样子，所以我无法告诉您标题的理想尺寸。我用于动态标题大小的公式在代码注释中。

我使用的值允许标题小至 14 像素，大至 30 像素，具体取决于视屏的宽度。

顺便说一句：我认为

plotly

默认是标题字体大小为20px。

在您的

ui

中添加以下内容。

  tags$head( 
    tags$style(HTML(                                # dynamic title size
      "g.infolayer g.g-gtitle text{
        font-size: calc(14px + (30 - 14) * ((100vw - 300px) / (1600 - 300))) !important;
      }"))
    # font-size: calc([minimum size] + ([maximum size] - [minimum size]) * 
    #     ((100vw - [minimum viewport width]) / ([maximum viewport width] - 
    #     [minimum viewport width])));
  )

minimum viewport width

和

maximum viewport width

均以像素为单位。 1600 是一个尺寸合适的显示器，而 300 比大多数手机屏幕都要小。

Answer 2

同样的问题 - 情节反应灵敏，但标题保持其大小。所以有时你只能看到标题的一部分。有没有办法在情节代码中解决它？我只在绘图中找到了有关响应式布局的链接，但没有有关响应式标题大小的信息： https://plotly.com/javascript/responsive-fluid-layout/#:~:text=Basic%20Charts%20tutorials.-,Responsive%20Plots,to%20viewed%20on%20mobile%20devices!&text=Responsive%20to %20窗口的%20大小！