如何提升Shiny中大数据量dygraph的刷新率？

问题根源 #

调整start数值输入框时界面冻结，是因为每次输入变化都会触发renderDygraph重新执行，服务器需要把200万条数据全部传递给前端生成新的dygraph实例，这一过程耗时较长；而拖动dyRangeSelector是前端JS直接操作已加载的图表数据，不需要服务器参与，所以几乎无延迟。

优化方案1：动态过滤数据子集 #

每次只将用户选择范围内的数据传给dygraph，大幅减少数据传输和前端渲染的压力：

library(shiny)
library(dygraphs)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      numericInput("start", label = "Start (iteration)", 
                   value = 1, step = 5E4),
      numericInput("duration", label = "Duration (iterations)", 
                   value = 5E4)
    ),
    mainPanel(
      dygraphOutput("plot")
    )
  )
)

server <- function(input, output) {
  # 预先生成原始数据（仅执行一次）
  z <- rnorm(2E6, 1, 10)
  time <- 1:length(z)
  df <- data.frame(time, z)
  
  # 动态生成当前需要的数据子集
  filtered_data <- reactive({
    end <- input$start + input$duration
    # 确保范围不超出数据边界
    start_clamped <- max(1, input$start)
    end_clamped <- min(length(z), end)
    df[start_clamped:end_clamped, ]
  })
  
  output$plot <- renderDygraph({
    dygraph(filtered_data()) %>% 
      dyRangeSelector()
  })
}

shinyApp(ui = ui, server = server)

这样每次调整输入时，服务器仅传递指定范围的少量数据（比如示例中的5万条），而非全部200万条，能显著提升响应速度。

优化方案2：前端直接控制图表范围（性能最优） #

利用dygraph的JavaScript API，在前端直接修改图表显示范围，完全避免服务器端重新渲染图表：

library(shiny)
library(dygraphs)
library(htmlwidgets)

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      numericInput("start", label = "Start (iteration)", 
                   value = 1, step = 5E4),
      numericInput("duration", label = "Duration (iterations)", 
                   value = 5E4)
    ),
    mainPanel(
      dygraphOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  # 预先生成原始数据（仅执行一次）
  z <- rnorm(2E6, 1, 10)
  time <- 1:length(z)
  df <- data.frame(time, z)
  
  output$plot <- renderDygraph({
    dygraph(df) %>% 
      dyRangeSelector() %>%
      # 注入JS代码监听输入变化，直接调整图表范围
      onRender("
        function(el, x) {
          var dygraph = this;
          Shiny.addCustomMessageHandler('updateRange', function(message) {
            var start = message.start;
            var end = message.start + message.duration;
            dygraph.updateOptions({dateWindow: [start, end]});
          });
        }
      ")
  })
  
  # 输入变化时向前端发送消息调整范围
  observe({
    req(input$start, input$duration)
    end <- input$start + input$duration
    start_clamped <- max(1, input$start)
    end_clamped <- min(length(z), end)
    session$sendCustomMessage("updateRange", list(
      start = start_clamped,
      duration = end_clamped - start_clamped
    ))
  })
  
  # 可选：同步图表范围到输入框，保持两者一致
  observeEvent(input$plot_date_window, {
    req(input$plot_date_window)
    start_val <- round(input$plot_date_window[1])
    end_val <- round(input$plot_date_window[2])
    updateNumericInput(session, "start", value = start_val)
    updateNumericInput(session, "duration", value = end_val - start_val)
  })
}

shinyApp(ui = ui, server = server)

这种方式下，图表仅在初始化时加载一次全部数据，后续调整输入框完全由前端JS处理，响应速度和拖动范围选择器几乎一致。

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