plotly阶梯折线图在Shiny应用中渲染卡顿的优化方案咨询

问题描述 #

在Shiny应用中嵌入Plotly图表，需展示三组数据：两组阶梯折线图、一组标记点。其中一组数据集包含65000行数据，使用shape = "vh"（阶梯模式）时，图表交互（如缩放）出现明显卡顿；切换为shape = "linear"则流畅，尝试ggplot的geom_step()也存在同样卡顿问题。

示例数据代码 #

library(dplyr)
library(lubridate)

now <- now()
num_rows <- 65000

timestamps1 <- seq(from =  now, by = seconds(6), length.out = num_rows)
values1 <- runif(num_rows, min = 100, max = 300)
one <- data.frame(Timestamp = timestamps1, Value = values1)

num_rows <- 4330
timestamps2 <- seq(from = now , by = seconds(900), length.out = num_rows)
values2 <- runif(num_rows, min = 100, max = 300)
one_ui <- data.frame(Timestamp = timestamps2, Value = values2)

Plotly绘图代码 #

library(plotly)
plot_ly() %>%
          add_trace(
            data = one, x = ~Timestamp, y = ~Value, name = "Raw Data", mode = "lines", type = "scatter",
            line = list(color = "#f69a8e", shape = "vh"),
            hovertemplate = "Timestamp:%{x}<br>Value:%{y:.2f}"
          ) %>%
          add_trace(
            data = one_ui, x = ~Timestamp, y = ~Value, name = "Reg Data", type = "scatter", mode = "lines", line = list(color = "#6bbcf3", width = 4, shape = "vh"),
            hovertemplate = "Timestamp:%{x}<br>Value:%{y:.2f}"
          ) %>%
          add_trace(data = one_ui, x = ~Timestamp, y = ~Value, name = "Reg Data points", type = "scatter", mode = "markers", marker = list(color = "#0788DE", width = 2), visible = "legendonly") %>%
          layout(
            xaxis = list(title = "Time Stamp (UTC)"),
            yaxis = list(title = input$drop_down)
          )

优化方案 #

1. 对大数据集进行降采样 #

阶梯图卡顿核心是65000行数据生成的阶梯线段过多，浏览器渲染压力大。针对时间序列数据，可按时间粒度降采样，保留阶梯图的趋势：

• 示例：按1分钟聚合，保留每个时间段的首尾值（匹配阶梯图特性）

one_downsampled <- one %>%
  mutate(Time_bin = floor_date(Timestamp, "1 minute")) %>%
  group_by(Time_bin) %>%
  summarise(
    Timestamp_start = first(Timestamp),
    Value_start = first(Value),
    Timestamp_end = last(Timestamp),
    Value_end = last(Value)
  ) %>%
  tidyr::pivot_longer(
    cols = c(Timestamp_start, Timestamp_end, Value_start, Value_end),
    names_to = c("Type", ".value"),
    names_sep = "_"
  ) %>%
  arrange(Timestamp)

用降采样后的数据集替换原数据绘图，可大幅减少数据点数量，同时保留阶梯形态。

2. 开启Plotly WebGL渲染 #

Plotly的scattergl类型利用GPU加速渲染，对大数据量的支持远优于普通scatter，直接修改绘图代码中的类型参数即可：

add_trace(
  data = one, x = ~Timestamp, y = ~Value, name = "Raw Data", mode = "lines", type = "scattergl",
  line = list(color = "#f69a8e", shape = "vh"),
  hovertemplate = "Timestamp:%{x}<br>Value:%{y:.2f}"
)

同时可关闭不必要的交互特性，比如将hovermode设为"closest"，减少hover时的全局计算量。

3. Shiny应用层面优化 #

• 延迟渲染：用shiny::debounce()或throttle()包裹数据更新逻辑，避免用户操作时频繁触发重绘
• 缓存图表：用shiny::cachem包对相同参数下的图表结果进行缓存，减少重复计算
• 资源配置：确保Shiny服务器有足够的CPU和内存资源，避免资源竞争导致的渲染延迟

4. 手动生成阶梯数据 #

跳过Plotly的shape = "vh"逻辑，手动生成阶梯图的线段数据：将每个数据点拆分为两个点（保持y值不变，x值延伸至下一个点的x值），减少Plotly内部的计算开销。此方法建议和降采样结合使用，单独对大数据量的优化效果有限。

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