r - 在 R/Shiny 中，htmlOutput()/renderUI() 的最佳替代方案？

Question

您好，下面的图表是我仪表板的一部分，但它使仪表板性能不佳。

更新需要时间。

除了函数 htmlOutput()+ renderUI() 之外，还有其他选择吗？

如何提高性能？在服务器外创建和生成图表是这样的吗？

library(shiny)
    library(highcharter)
    library(tidyverse)
    
    df <-tibble(months = month.abb, value = ts(cumsum(rnorm(100)))[1:12]  )
    
    ui <- fluidPage(
      
      h1("Highcharts"),
      htmlOutput('chart_grid')
      
    )
    
    server <- function(input, output, session) {
      
      output$chart_grid<- renderUI({
        
        charts <- lapply(1:9, function(x) {
        
        highchart() %>% 
            hc_add_series(type = 'spline',data = df, hcaes(x = months,y = value))%>%
            hc_xAxis(categories = df$months)
        })
          
          hw_grid(charts, rowheight = 300,add_htmlgrid_css = TRUE)%>%
            htmltools::browsable()  
    
    })
    }
    
    shinyApp(ui, server)

Answer 1

TL;DR highcharts 用于许多数据点的 JS 增强模块，如果有一个或几个绘图版本，用于绘图的静态 HTML，自己的网格和 highcharter::highchartOutput

静态 HTML

策略是在 Shiny 的应用程序启动之前创建所需的绘图，但我们必须假设该绘图有一个或几个版本，因为大量的 html 集合也可能是一个错误的方向。通常我们使用 htmlwidgets::saveWidget 来保存任何 Shiny 的小部件，这样我们就可以获得它的 html 表示。由于 hw_grid 没有返回 Shiny 的小部件，我将其保存为常规 html，但我们必须处理依赖关系。

我在这里使用 hchart(不是 highchart)，因为它会在绘图上保留标签。

您不必在 app.R 文件中留下用于创建 html 的代码。但在我的示例中，您仍然需要保留依赖项列表。然后，您可以使用 htmltools::renderDependencies(htmltools::resolveDependencies(DEPS)) 在 DOM 头部添加依赖项。请记住，当您部署 Shiny 的应用程序时，您必须添加静态文件，例如添加资源路径 https://shiny.rstudio.com/reference/shiny/1.0.2/addResourcePath.html

library(shiny)
library(highcharter)
library(tidyverse)
library(magrittr)

df <- tibble::tibble(months = month.abb, value = ts(cumsum(rnorm(100)))[1:12])

charts <- lapply(1:9, function(x) {
  hchart(df, type = "spline", hcaes(x = months, y = value)) %>%
    hc_xAxis(categories = df$months) %>%
    hc_boost(enabled = TRUE)
})

hc_test <- hw_grid(charts, rowheight = 300, add_htmlgrid_css = TRUE, browsable = TRUE)
# get HTML of the plot
# we could not use htmlwidgets::saveWidget as it is not a widget
writeLines(as.character(hc_test), "hc_test.html")
# get the dependencies of the plot
hc_deps <- htmltools::findDependencies(hc_test)

# unique dependencies in the HTML format, could be added in the head
# htmltools::renderDependencies(htmltools::resolveDependencies(hc_deps))

ui <- fluidPage(
  h1("Highcharts"),
  htmlOutput("chart_grid")
)

server <- function(input, output, session) {
  output$chart_grid <- renderUI({
    # Load HTML with proper dependencies
    htmltools::attachDependencies(
      shiny::HTML(readLines("hc_test.html")), 
      htmltools::resolveDependencies(hc_deps)
    )

  })
}

shinyApp(ui, server)

提升模块

源代码highcharts JS库提供了一个可以提升性能的boost模块。从 R 的角度来看，它就像将 hc_boost(enabled = TRUE) 添加到您的管道一样简单。 https://www.highcharts.com/docs/advanced-chart-features/boost-module

据我了解，hc_boost 只能在特定场景下提高性能，但代价是失去一些功能。我没有测试它是否真的按预期工作。

library(shiny)
library(highcharter)
library(tidyverse)

df <- tibble(months = month.abb, value = ts(cumsum(rnorm(100)))[1:12])

ui <- fluidPage(
  h1("Highcharts"),
  htmlOutput("chart_grid")
)

server <- function(input, output, session) {
  output$chart_grid <- renderUI({
    charts <- lapply(1:9, function(x) {
      highchart() %>%
        hc_add_series(type = "spline", data = df, hcaes(x = months, y = value)) %>%
        hc_xAxis(categories = df$months) %>%
        hc_boost(enabled = TRUE)
    })

    hw_grid(charts, rowheight = 300, add_htmlgrid_css = TRUE, browsable = TRUE)
  })
}

shinyApp(ui, server)

Highcharts 和自己的网格

library(shiny)
library(highcharter)
library(tidyverse)

df <- tibble(months = month.abb, value = ts(cumsum(rnorm(100)))[1:12])

ui <- fluidPage(
  h1("Highcharts"),
  shiny::tags$div(
    style = "display:flex;flex-wrap: wrap;",
    lapply(1:9, function(x) shiny::tags$div(
      style = "flex: 1 1 30%;",
      highcharter::highchartOutput(sprintf("hplot%s", x)))
    )
  )
)

server <- function(input, output, session) {
  
  charts <- lapply(1:9, function(x) {
    output[[sprintf("hplot%s", x)]] <- highcharter::renderHighchart(
      highchart(width = 600) %>%
        hc_add_series(type = "spline", data = df, hcaes(x = months, y = value)) %>%
        hc_xAxis(categories = df$months)
    )
  })
}

shinyApp(ui, server)

顺便说一句。

我个人认为 highcharter 包需要在代码质量和文档方面做很多工作，例如hw_grid 甚至没有记录返回值。