[单击图像时的R闪亮Javascript渲染图

Question

我有两个并排的盒子，下面有两个猫和狗的照片。我希望达到的目的是：当用户单击狗图像时，每个框中的内容都会更改。当用户单击猫图片时，每个框中的内容将返回到初始内容。我使用了一些Javascript来达到此目的，但是单击狗图像后，该图无法渲染。我已附上我的应用程序的一些图片以说明问题。

这是应用程序加载的时间。

现在，当我单击狗的图片时，您可以看到内容确实发生了变化，但是并没有呈现出情节。单击狗图片后，如果单击猫图片，则内容返回（作为共享的第一张图片）。

这是我的代码：

ui.R

shinyUI(

fluidPage(

    dashboardPage(

        dashboardHeader(title = "Example", titleWidth = 350),

        dashboardSidebar(width = 300),

        dashboardBody(

            useShinyjs(), 

            div(class = "fade-in",

                fluidRow(id = "cat_story", style = "display: block;",

                         column(width = 8, style = "padding: 0px;", 

                                box(width = 12, plotlyOutput("cat_plot", height = "55vh"), style = "height: 60vh;")


                         ), 

                         column(width = 4, style = "padding: 0px;", 

                                box(width = 12, h1("Cat Test"), style = "height: 60vh;"),
                        )),

                fluidRow(id = "dog_story", style = "display: none;",

                         column(width = 8, style = "padding: 0px;",

                                box(width = 12, plotlyOutput("dog_plot", height = "55vh"), style = "height: 60vh;")

                        ),

                         column(width = 4, style = "padding: 0px;",

                                box(width = 12, h1("Dog Test"), style = "height: 60vh;")

                         ))),

            fluidRow(

                column(width=6, img(id="catI", src="cat.png", width="100%", onclick = "replace('cat_story', 'dog_story')", style = "height: 25vh;")),
                column(width=6, img(id="dogI", src="dog.png", width="100%", onclick = "replace('dog_story', 'cat_story')", style = "height: 25vh;"))

            ),

            includeScript("www/addition.js")

        ))))

server.R

shinyServer(function(input, output, session) {

   output$cat_plot <- renderPlotly({

        ggplotly(ggplot(mpg, aes(displ, hwy, colour = class)) + geom_point())

   })

   output$dog_plot <- renderPlotly({

        ggplotly(ggplot(mpg, aes(displ, hwy, colour = class)) + geom_point())

   })


 })

addition.js

function replace(show, hide) {
  document.getElementById(show).style.display="block";
  document.getElementById(hide).style.display="none";
}

我知道有一个ShinyJS包，并尝试使用它。但是我对此不太熟悉。任何帮助将不胜感激！谢谢！

Answer 1

[问题出在includeScript上，我认为它需要路径，请尝试普通tags$script

library(shiny)
library(plotly)
library(shinyjs)
library(shinydashboard)


jscode <- 'function replace(t1, t2) {
  document.getElementById(t1).style.display="block";
  document.getElementById(t2).style.display="none";
}'


ui <- fluidPage(
    dashboardPage(
        dashboardHeader(title = "Example", titleWidth = 350),
        dashboardSidebar(width = 300),
        dashboardBody(
            useShinyjs(), 
            div(class = "fade-in",
                fluidRow(id = "cat_story", style = "display: block;",
                         column(width = 8, style = "padding: 0px;", 
                                box(width = 12, plotlyOutput("cat_plot", height = "55vh"), style = "height: 60vh;")
                         ), 
                         column(width = 4, style = "padding: 0px;", 
                                box(width = 12, h1("Cat Test"), style = "height: 60vh;"),
                         )),

                fluidRow(id = "dog_story", style = "display: none;",
                         column(width = 8, style = "padding: 0px;",
                                box(width = 12, plotlyOutput("dog_plot", height = "55vh"), style = "height: 60vh;")
                         ),
                         column(width = 4, style = "padding: 0px;",
                                box(width = 12, h1("Dog Test"), style = "height: 60vh;")
                         ))),
            tags$script(jscode),
            fluidRow(
                column(width=6, img(id="catI", src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/June_odd-eyed-cat.jpg/737px-June_odd-eyed-cat.jpg", width="100%", onclick = "replace('cat_story', 'dog_story')", style = "height: 25vh;")),
                column(width=6, img(id="dogI", src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/My_dog.jpg/800px-My_dog.jpg", width="100%", onclick = "replace('dog_story', 'cat_story')", style = "height: 25vh;"))
            )
            #,

        )))

server <- function(input, output, session) {

    output$cat_plot <- renderPlotly({

        ggplotly(ggplot(mpg, aes(displ, hwy, colour = class)) + geom_point())

    })

    output$dog_plot <- renderPlotly({

        ggplotly(ggplot(mpg, aes(displ, hwy, colour = class)) + geom_point())

    })
}

shinyApp(ui, server)