如何调整搭载Shiny的flexdashboard中Highcharter子图的尺寸

我尝试在搭载Shiny的flexdashboard中使用hw_grid()展示highcharter子图。
静态flexdashboard文档中两行子图均可正常展示：

我可以通过修改hw_grid()的rowheight参数调整子图尺寸。
但当我在flexdashboard中启用Shiny（在YAML头部添加runtime: shiny）后，rowheight参数会被忽略，子图的第二行无法在容器中完整展示：

我如何在使用Shiny的flexdashboard中复现静态文档的展示效果？

可正常运行的静态文档代码 #

---
title: "hw_grid flexdashboard"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
---

```{r setup, include = FALSE}
library(flexdashboard)
library(shiny)
library(tibble)
library(dplyr)
library(highcharter)

data <- 
  structure(list(date = structure(c(18806, 18806, 18806, 18806, 
  18806, 18806, 18806, 18806, 18807, 18807, 18807, 18807, 18807, 
  18807, 18807, 18807, 18808, 18808, 18808, 18808, 18808, 18808, 
  18808, 18808), class = "Date"), value = c(108.8, 138, 90.1, 97.4, 
  79, 85.7, 74.6, 73.4, 108.8, 144.9, 80.6, 99.7, 75.8, 78.9, 73.9, 
  76.8, 109.2, 126.6, 81.6, 100.2, 74.4, 81.2, 73.5, 78.5), category = c("A", 
  "B", "C", "D", "E", "F", "G", "H", "A", "B", "C", "D", "E", "F", 
  "G", "H", "A", "B", "C", "D", "E", "F", "G", "H")), class = c("spec_tbl_df", 
  "tbl_df", "tbl", "data.frame"), row.names = c(NA, -24L))

Row #

hw_grid flexdashboard #

data %>%
    group_by(category) %>%
    group_map( ~ {
      .x %>%
        hchart("line", hcaes(x = date, y = value))
    }) %>%
    # rowheight adjusts the size of the subplots.
    hw_grid(ncol = 4, rowheight = "220px", browsable = TRUE)

## 存在问题的Shiny版代码
```r
---
title: "hw_grid flexdashboard with Shiny"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: scroll
    orientation: rows
---

```{r setup, include = FALSE}
library(flexdashboard)
library(shiny)
library(tibble)
library(dplyr)
library(highcharter)

data <- 
  structure(list(date = structure(c(18806, 18806, 18806, 18806, 
  18806, 18806, 18806, 18806, 18807, 18807, 18807, 18807, 18807, 
  18807, 18807, 18807, 18808, 18808, 18808, 18808, 18808, 18808, 
  18808, 18808), class = "Date"), value = c(108.8, 138, 90.1, 97.4, 
  79, 85.7, 74.6, 73.4, 108.8, 144.9, 80.6, 99.7, 75.8, 78.9, 73.9, 
  76.8, 109.2, 126.6, 81.6, 100.2, 74.4, 81.2, 73.5, 78.5), category = c("A", 
  "B", "C", "D", "E", "F", "G", "H", "A", "B", "C", "D", "E", "F", 
  "G", "H", "A", "B", "C", "D", "E", "F", "G", "H")), class = c("spec_tbl_df", 
  "tbl_df", "tbl", "data.frame"), row.names = c(NA, -24L))

Row #

hw_grid Shiny Issue #

output$chart <- renderUI({
  data %>%
    group_by(category) %>%
    group_map(~ {
      .x %>%
        hchart("line", hcaes(x = date, y = value))
    }) %>%
    hw_grid(ncol = 4,
            rowheight = "220px",  # rowheight does nothing here
            browsable = TRUE)
})

htmlOutput('chart')

## 已尝试的无效方案
- 在代码块中设置knitr的`fig.height`参数
- 修改行高（例如`Row {height=300}`）
- 使用`fillCol`和`fillRow`调整布局，无法生效
---
# 解决方案
问题本质是Shiny模式下`htmlOutput`默认的容器高度被flexdashboard的自适应逻辑限制，无法自动匹配`hw_grid`生成的子图总高度，导致`rowheight`参数设置的子图高度无法撑开父容器。
你只需要在调用`htmlOutput`时手动指定容器高度即可，高度可以根据子图行数计算：单行行高220px，2行的话设置480px（预留少量边距）即可完整展示所有子图。
修改后的核心代码如下：
```r
```{r subplots}
output$chart <- renderUI({
  data %>%
    group_by(category) %>%
    group_map(~ {
      .x %>%
        hchart("line", hcaes(x = date, y = value))
    }) %>%
    hw_grid(ncol = 4,
            rowheight = "220px",
            browsable = TRUE)
})
# 手动指定输出容器高度，匹配两行子图的总高度
htmlOutput('chart', height = "480px")

如果子图数量是动态的，你可以根据子图总数自动计算高度：
```r
output$chart <- renderUI({
  plots <- data %>%
    group_by(category) %>%
    group_map(~ {
      .x %>%
        hchart("line", hcaes(x = date, y = value))
    })
  # 动态计算总高度：行高*行数 + 20px边距
  n_row <- ceiling(length(plots)/4)
  total_height <- paste0(n_row * 220 + 20, "px")
  
  hw_grid(plots, ncol = 4, rowheight = "220px", browsable = TRUE)
})
# 动态绑定计算好的高度
htmlOutput('chart', height = reactive(total_height))

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