在闪亮的应用程序中为多个地块绘制图例外部图例

dygraphs legend outside plot in shiny app for multiple plots

我有这个闪亮的应用程序,我正在其中绘制多个 dygraphs。不幸的是,我不知道会有多少情节。它可能会不时变化。所以我想出了使用 uiOutputrenderUI 来构建一个对地块数量做出反应的应用程序。参见 https://shiny.rstudio.com/articles/dynamic-ui.html

现在我想在各自的情节之外显示每个 dygraph 的图例,如下所示:

我现在的问题是,图例的 <div> 元素与绘图元素的高度不同。

我的代码是:

UI:

library(dygraphs)
shinyUI(fluidPage(
 titlePanel("Simple example"),
 sidebarLayout(
  sidebarPanel(),
  mainPanel(
   fluidRow(column(10, uiOutput("graphs")),
            column(2, uiOutput("legends")))
   )
 )
))

服务器:

library(dygraphs)
library(xts)

shinyServer(function(input, output, session) {

# load xts sample data
data("sample_matrix")
sample.xts <- as.xts(sample_matrix)

output$graphs <- renderUI({ 
 plot_output_list <- lapply(1:3, function(i) { 
  dygraphOutput(paste0('div_graph_', i)) 
 }) 
})

output$legends <- renderUI({
 legend_output_list <- lapply(1:3, function(i) {
   htmlOutput(paste0("div_legende",i), height = "400px")
 })
})

# do the plotting
lapply(1:3, function(i) {
  output[[paste0('div_graph_', i)]] <- renderDygraph({
   dygraph(sample.xts[,i],main=i)%>%
    dyLegend(labelsDiv = paste0("div_legende",i), show = "always")
  })
 })
})

这就引出了这个剧情,可以看到三个剧情的图例都是直接贴在一起的。我希望他们在各自的情节中是正确的。

我明白了。 创建一个 plotOutput 和一个空的 plot 就可以了:

Ui 保持不变。 服务器:

library(dygraphs)
library(xts)

shinyServer(function(input, output, session) {

 data("sample_matrix")
 sample.xts <- as.xts(sample_matrix)

 output$graphs <- renderUI({ 
  plot_output_list <- lapply(1:3, function(i) { 
  dygraphOutput(paste0('div_graph_', i)) 
 }) 
})

output$legends <- renderUI({
 legend_output_list <- lapply(1:3, function(i) {
  plotOutput(paste0("div_legende",i), height = "400px")
 })
})

lapply(1:3, function(i) {
  output[[paste("div_legende",i)]] <- renderPlot(
    plot(1,1,type="n",xaxt="n",yaxt="n",ylab="",xlab="",bty="n"),
    height = "400px"
  )
  output[[paste0('div_graph_', i)]] <- renderDygraph({
  dygraph(sample.xts[,i],main=i)%>%
    dyLegend(labelsDiv = paste0("div_legende",i),
             show = "always")
  })
 })
})