如何在R中放大指定区域后将Plotly对象保存为HTML文件

我有一个Plotly对象p，可以通过htmlwidgets::saveWidget(as_widget(p), "example.html")保存为HTML文件。由于数据量较大，我希望先放大到特定区域再保存文件，是否可行？我的图是多个共享同一X变量（此处为time）的Y变量组成的堆叠子图。

附可复现代码：

library(data.table)
library(dplyr)
library(tidyr)
library(plotly)
library(jsonlite)

# 创建示例数据
dt <- data.table(
  time = 1:10,
  a = rnorm(10),
  b = rnorm(10),
  c = rnorm(10)
)

# 堆叠子图自定义函数
plotly_stacked <- function(df, x_colName, cols, xcol_time = FALSE) {
  # 子集化并重塑数据
  DF <- df[, ..cols] %>%
    tidyr::gather(variable, value, -x_colName) %>%
    transform(id = as.integer(factor(variable)))

  DF$variable <- factor(DF$variable, levels = unique(DF$variable))

  # 用前后值填充缺失值
  while(any(is.na(DF$value))) {
    DF <- DF %>%
      group_by(variable) %>%
      mutate(value = ifelse(is.na(value), 
                           ifelse(is.na(lead(value)), lag(value), lead(value)), 
                           value)) %>%
      ungroup()
  }

  # 定义X轴
  ax1 <- list(title = x_colName, zeroline = TRUE, showline = TRUE)

  # 创建Plotly对象
  p <- plot_ly(
    data = DF, 
    x = ~get(names(DF[1])), 
    y = ~value, 
    color = ~variable, 
    colors = "Dark2",
    yaxis = ~paste0("y", sort(id, decreasing = FALSE))
  ) %>%
    add_lines() %>%
    layout(
      xaxis = ax1,
      legend = list(orientation = "h", xanchor = "center", x = 0.5)
    ) %>%
    plotly::subplot(
      nrows = length(unique(DF$variable)), 
      shareX = TRUE, 
      titleY = TRUE
    )

  # 同步hover信息
  labels <- c("xy", paste0("xy", 2:(length(cols)-1)))
  labels_json <- jsonlite::toJSON(labels)

  js_code <- sprintf(
    'function(el, x) {
      el.on("plotly_hover", function(d) {
        Plotly.Fx.hover(el.id, {xval: d.xvals[0]}, %s);
      })
    }',
    labels_json
  )

  p <- p %>%
    layout(hovermode = "x") %>%
    htmlwidgets::onRender(js_code)

  return(p)
}

# 生成图
plotly_stacked(dt, "time", c("time", "a", "b", "c"))

完全可行，以下两种方法可以实现需求：

方法一：在R代码中直接指定缩放范围（批量/自动化场景首选） #

因为你的图是共享X轴的子图布局，只需要在layout中明确设置X轴的range，如果需要单独调整某个子图的Y轴范围，也可以对应设置yaxis/yaxis2/yaxis3的range参数。

修改示例代码实现指定区域保存 #

在生成图之后，添加布局调整的代码：

# 生成图
p <- plotly_stacked(dt, "time", c("time", "a", "b", "c"))

# 设置X轴缩放范围（比如放大time=3到7的区域），同时可指定某子图的Y轴范围
p <- p %>%
  layout(
    xaxis = list(range = c(3, 7)),  # 共享X轴的缩放范围
    yaxis = list(range = c(-2, 2)), # 第一个子图的Y轴范围
    yaxis2 = list(range = c(-1.5, 1.5)) # 第二个子图的Y轴范围
    # 第三个子图对应yaxis3，以此类推
  )

# 保存为HTML
htmlwidgets::saveWidget(as_widget(p), "example_zoomed.html")

这种方法的优势是可以自动化批量处理，无需手动交互。

方法二：交互式调整后保存（手动场景） #

如果你希望手动在RStudio Viewer或浏览器中调整缩放范围后再保存，可以通过以下步骤：

1. 运行代码生成图，在Viewer中调整到目标缩放区域；
2. 打开浏览器的开发者工具（F12），找到Plotly图的容器元素；
3. 执行以下JavaScript代码获取当前的轴范围：

// 获取当前X轴范围
const xRange = Plotly.getPlot(document.querySelector('.plotly')).layout.xaxis.range;
// 获取各个Y轴范围，比如第一个Y轴
const y1Range = Plotly.getPlot(document.querySelector('.plotly')).layout.yaxis.range;

4. 将获取到的范围值代入方法一的layout参数中，再执行保存代码即可。

另外，也可以借助htmlwidgets的onRender函数，在页面加载时自动应用预设的缩放范围：

# 添加自动缩放的JS代码
zoom_js <- 'function(el, x) {
  // 页面加载后自动设置X轴范围
  Plotly.relayout(el.id, {
    "xaxis.range": [3, 7],
    "yaxis.range": [-2, 2],
    "yaxis2.range": [-1.5, 1.5]
  });
}'

p <- p %>% htmlwidgets::onRender(zoom_js)

# 保存
htmlwidgets::saveWidget(as_widget(p), "example_auto_zoomed.html")

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