R Shiny Javascript Render Plot, когда изображение нажимается - PullRequest
Новая
       104

R Shiny Javascript Render Plot, когда изображение нажимается

0 голосов
/ 27 апреля 2020

У меня есть две коробки рядом друг с другом и два изображения ниже с изображением кошек и собак. Я надеюсь достичь следующего: когда пользователь нажимает на изображение собаки, содержимое в каждом окне меняется. Когда пользователь нажимает на изображение кошки, содержимое каждого поля возвращается к начальному содержимому. Я использовал Javascript, чтобы добиться этого, но график не отображается после нажатия на изображение собаки. Я приложил несколько фотографий моего приложения, чтобы проиллюстрировать проблему.

Это когда приложение загружается. Cat

Теперь, когда я нажимаю на собаку изображение, вы можете видеть, что содержание меняется, но не отображает сюжет. После нажатия на картинку с изображением собаки, если я нажму на картинку с изображением кошки, содержимое вернется (как показано на первой фотографии). Dog

Вот мой код:

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())

   })


 })

добавление. js

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

Я знаю, что есть блестящий пакет JS, и пытался его использовать. Но я не слишком знаком с этим. Любая помощь будет принята с благодарностью! Спасибо!

...