如何在R中调整破折号的高度？答案

【问题标题】：How to adjust height of dash plotly figures in R?如何在R中调整破折号的高度？
【发布时间】：2021-10-13 21:58:41
【问题描述】：

我有 3 个使用 ggplotly 和 dash 制作的散点图。然后，我使用 Dash 在选项卡中绘制 3 个数字，但数字的高度看起来被压扁了，我不知道如何增加它们的高度。

我用这样的代码制作了 3 个有情节的数字 3 次：

p1 <- ggplot(data, aes(x=col1, y=col1))
plotlyp1 <- ggplotly(p1)

然后我使用 3 个选项卡对破折号图进行编码，每个图形一个选项卡，其中：

app <- Dash$new()

app$layout(htmlDiv(list(
  htmlH1('3 plots'),
  dccTabs(id="tabs-example", value='tab-1-example', children=list(
    dccTab(label='plot1', value='tab-1-example'),
    dccTab(label='plot2', value='tab-2-example'),
    dccTab(label='plot3', value='tab-3-example')
  )),
  htmlDiv(id='tabs-plots')
)))

app$callback(
  output = list(id='tabs-plots', property = 'children'),
  params = list(input(id = 'tabs-example', property = 'value')),
  function(tab){
    if(tab == 'tab-1-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-1-tabs',
          figure=plotlyp1
        )
      )))
    }
    
    else if(tab == 'tab-2-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-2-tabs',
          figure=plotlyp2
        )
      )))
    }
    
    else if(tab == 'tab-3-example'){
      return(htmlDiv(list(
        htmlH3(''),
        dccGraph(
          id='graph-3-tabs',
          figure=plotlyp3,
           style = list(
            height ='100%'),
        )
      )))
    }
  }
  
  
  
)

app$run_server()

目前为了获得更高的高度，我在dccGraph() 中尝试style = list(height ='100%')，但这似乎没有任何作用，我在 R 中找不到任何示例/资源来显示如何更改绘图高度。

作为参考，上面的破折号代码给出了这个：

每个标签都有这样的情节，我只是想让它们的高度变大。

【问题讨论】：

标签： r ggplot2 plotly plotly-dash

【解决方案1】：

style = list(height = "100%") 会将 CSS height:100% 添加到包含绘图的 div 中。这会将绘图缩放到父 div 的 100% 高度，由 htmlDiv() 生成。您可以放大父级：

if(tab == 'tab-1-example'){
  return(htmlDiv(
           style = list(height = '750px'), # <=
           list(
             htmlH3(''),
             dccGraph(
             id = 'graph-1-tabs',
             figure = plotlyp1,
             style = list(height = '100%')
            )
          )))
        }

【讨论】：