Shiny中shinyscreenshot截图ggplotly颜色条图例无色问题求解

• Shiny框架中，ggplotly生成的带colorbar的可视化图表在页面中显示正常（数值型颜色映射的渐变颜色条清晰可见）
• 使用shinyscreenshot工具对该区域截图时，colorbar图例变为无色（仅保留边框，无渐变色彩）
• 排查确认：仅连续数值型colorbar场景出现此问题，离散分组因子类型的图例可正常截图显示
• 业务场景必须使用colorbar（数值范围覆盖0.0001至100%）

library(shiny)
library(shinydashboard)
library(shinyscreenshot)
library(data.table)
library(DT)
library(bslib)
library(plotly)

server = shinyServer(function(input,output){
  
  # 注：将color映射改为连续型变量mpg，以复现colorbar问题
  output$histogram = renderPlotly(
    ggplotly(ggplot(mtcars, aes(x=disp, y=hp, color=mpg)) + geom_point())
  )
  
  output$active_cases = DT::renderDataTable(
    mtcars)
  
  observeEvent(input$go,{
    screenshot(id = "to_plot") # 仅截取ID为"to_plot"的区域
  })
  
})

ui = shinyUI(
  dashboardPage(
    dashboardHeader(
      title="测试示例"
    ),
    dashboardSidebar(
      sidebarMenu(id="tabs",
                  menuItem("Tab1", tabName="active_cases", icon = icon("magnifying-glass-location"))
      )
    ),
    dashboardBody(
      tabItems(
        tabItem(tabName="active_cases", shiny::h2("Active Cases"),
                fluidRow(actionButton("go", "截图")),
                fluidRow(
                  box(title="数据表格", status="primary", solidHeader=TRUE, div(DT::dataTableOutput("active_cases")))
                ),
                div(id="to_plot",
                    fluidRow(
                      box(title="可视化图表", status="primary", solidHeader=TRUE, plotlyOutput("histogram"))
                    )
                )
        )))))

方案1：改用Plotly原生语法构建图表 #

ggplotly对colorbar的渲染存在兼容性问题，直接使用Plotly原生API创建图表，可避免截图时的颜色丢失：

output$histogram = renderPlotly(
  plot_ly(mtcars, x = ~disp, y = ~hp, color = ~mpg, type = "scatter", mode = "markers") %>%
    colorbar(title = "MPG", limits = range(mtcars$mpg))
)

方案2：替换为webshot2截图工具 #

webshot2对JavaScript渲染的元素（如Plotly的colorbar）支持更完善，替换步骤：

1. 安装依赖包：

install.packages("webshot2")

2. 修改服务器端截图逻辑：

# 替换原shinyscreenshot的observeEvent代码
observeEvent(input$go,{
  # 截取指定区域并保存
  webshot2::webshot(output = "plot_screenshot.png", selector = "#to_plot")
  # 自动触发下载
  shiny::showNotification("截图已生成", type = "success")
  shiny::downloadHandler(
    filename = function() "plot_screenshot.png",
    content = function(file) file.copy("plot_screenshot.png", file)
  )()
})

方案3：强制指定colorbar渲染参数 #

在ggplotly输出中手动设置colorbar的渐变色和边框参数，确保截图时能正确捕获色彩：

output$histogram = renderPlotly(
  ggplotly(ggplot(mtcars, aes(x=disp, y=hp, color=mpg)) + geom_point()) %>%
    layout(
      coloraxis = list(
        colorbar = list(
          # 手动指定渐变色阶
          colorscale = list(c(0, "#440154"), c(0.25, "#3b528b"), c(0.5, "#21918c"), c(0.75, "#5ec962"), c(1, "#fde725")),
          outlinecolor = "#000000",
          outlinewidth = 1,
          title = list(text = "MPG")
        )
      )
    )
)

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