chartJSRadar 下载处理程序创建空 png

Question

我想在我闪亮的应用程序中创建一个下载按钮，以下载使用 chartJSRadar 创建的反应图。我无法解决这个问题！由于我已经解决了互联网上记录的问题，我无法解决它，一直收到一个空的 png。按照建议 (Save plots made in a shiny app), https://groups.google.com/forum/#!msg/shiny-discuss/u7gwXc8_vyY/IZK_o7b7I8gJ
我建立了一个功能...... 所以我的代码是一个示例代码：

ui.R:

library(radarchart)

shinyUI(pageWithSidebar(
  headerPanel('Radarchart Shiny Example'),
  sidebarPanel(
    checkboxGroupInput('selectedPeople', 'Who to include', 
                       names(radarchart::skills)[-1], selected="Rich")
  ),
  mainPanel(
    chartJSRadarOutput("plot1", width = "450", height = "300"), width = 7,
  radioButtons(inputId = "var3", label = "Select the file type", choices = list("png", "pdf")),
  downloadButton('downloadPlot', 'Download Plot')
  )
))

server.R


library(radarchart)

shinyServer(function(input, output) {
  output$plot1 <- renderChartJSRadar({

    chartJSRadar(skills[, c("Label", input$selectedPeople)], 
                 maxScale = 10, showToolTipLabel=TRUE)
  })

  plot2 <- function(){
    chartJSRadar(skills[, c("Label", input$selectedPeople)], 
                 maxScale = 10, showToolTipLabel=TRUE)
  }

  output$downloadPlot <- downloadHandler(
    filename = "Shinyplot.png",
    content = function(file) {
      png(file)
      plot2()
      print(plot2())
      dev.off()
  })    
})

Answer 1

chartJSRadar returns 一个 htmlWidget。要保存，请尝试使用临时 html 文件的 saveWidget 和 webshot。添加 webshot 个库：

library(webshot)

并尝试在 server 函数中将其替换为 downloadHandler：

output$downloadPlot <- downloadHandler(
  filename = "Shinyplot.png",
  content = function(file) {
    saveWidget(plot2(), "temp.html", selfcontained = TRUE)
    webshot("temp.html", file = file)
  }
)

Answer 2

这是一个 JavaScript 方法，我认为应该比 webshot 更快。

library(shiny)
library(radarchart)
library(htmlwidgets) # to use the 'onRender' function

js <- c(
  "function(el, x){",
  "  $('#downloadPlot').on('click', function(){",
  "    // Clone the chart to add a background color.",
  "    var cloneCanvas = document.createElement('canvas');",
  "    cloneCanvas.width = el.width;",
  "    cloneCanvas.height = el.height;",
  "    var ctx = cloneCanvas.getContext('2d');",
  "    ctx.fillStyle = '#FFFFFF';",
  "    ctx.fillRect(0, 0, el.width, el.height);",
  "    ctx.drawImage(el, 0, 0);",
  "    // Download.",
  "    const a = document.createElement('a');",
  "    document.body.append(a);",
  "    a.download = 'radarchart.png';",
  "    a.href = cloneCanvas.toDataURL('image/png');",
  "    a.click();",
  "    a.remove();",
  "  });",
  "}"
)

ui <- pageWithSidebar(
  headerPanel('Radarchart Shiny Example'),
  sidebarPanel(
    checkboxGroupInput('selectedPeople', 'Who to include', 
                       names(radarchart::skills)[-1], selected="Rich"),
    actionButton('downloadPlot', 'Download Plot')
  ),
  mainPanel(
    chartJSRadarOutput("plot1", width = "450", height = "300"), width = 7
  )
)

server <- function(input, output) {
  output$plot1 <- renderChartJSRadar({
    chartJSRadar(skills[, c("Label", input$selectedPeople)], 
                 maxScale = 10, showToolTipLabel=TRUE) %>% 
      onRender(js)
  })
}

shinyApp(ui, server)

这仅导出到 png。使用 webshot 导出到 pdf.

编辑

library(shiny)
library(radarchart)

js <- paste0(c(
  "$(document).ready(function(){",
  "  $('#downloadPlot').on('click', function(){",
  "    var el = document.getElementById('plot1');",
  "    // Clone the chart to add a background color.",
  "    var cloneCanvas = document.createElement('canvas');",
  "    cloneCanvas.width = el.width;",
  "    cloneCanvas.height = el.height;",
  "    var ctx = cloneCanvas.getContext('2d');",
  "    ctx.fillStyle = '#FFFFFF';",
  "    ctx.fillRect(0, 0, el.width, el.height);",
  "    ctx.drawImage(el, 0, 0);",
  "    // Download.",
  "    const a = document.createElement('a');",
  "    document.body.append(a);",
  "    a.download = 'radarchart.png';",
  "    a.href = cloneCanvas.toDataURL('image/png');",
  "    a.click();",
  "    a.remove();",
  "    cloneCanvas.remove();",
  "  });",
  "});"
), collapse = "\n")

ui <- pageWithSidebar(
  headerPanel('Radarchart Shiny Example'),
  sidebarPanel(
    checkboxGroupInput('selectedPeople', 'Who to include', 
                       names(radarchart::skills)[-1], selected="Rich"),
    actionButton('downloadPlot', 'Download Plot')
  ),
  mainPanel(
    tags$head(tags$script(HTML(js))),
    chartJSRadarOutput("plot1", width = "450", height = "300"), width = 7
  )
)

server <- function(input, output) {
  output$plot1 <- renderChartJSRadar({
    chartJSRadar(skills[, c("Label", input$selectedPeople)], 
                 maxScale = 10, showToolTipLabel=TRUE) 
  })
}

shinyApp(ui, server)

chartJSRadar 下载处理程序创建空 png

chartJSRadar downloadhandler creating empty png

r

download

radar-chart

chart.js

shinyapps

编辑