dygraphs传奇外面的情节在闪亮的应用程序中的多个情节

Question

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

现在我想在各自的情节之外显示每个dygraph的图例，如下所示：Is there a way to add legend next to a dygraph in R, not exactly on the plot?

我的问题是，图例中的<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")
  })
 })
})

这导致了这个图，你可以看到所有三个图的图例都直接粘贴在一起。我希望他们对各自的情节都是正确的。

Answer 1

我明白了。 创建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")
  })
 })
})