Включить AmChart в приложение Shiny, встроенное в HTML - PullRequest
Новая
       15

Включить AmChart в приложение Shiny, встроенное в HTML

1 голос
/ 27 марта 2019

Я пытаюсь создать всплывающее окно в моем Shiny app, которое должно содержать простой график, созданный с использованием AmChart.Ниже мое голое приложение Shiny Shell без какого-либо сюжета: 

runApp(list(
    ui = bootstrapPage(
      tags$style(type = 'text/css', 
          ".wrap {
              position: absolute;
              overflow: hidden;
              top: 10%;
              right: 10%;
              bottom: 85px;
              left: 10%;
              padding: 10px 50px;
              display: block;
              border-radius: 4px;
              transform: translateY(20px);
              transition: all 0.5s;
              visibility: hidden;
            }"),
      tags$style(type = 'text/css', 
          "
            .wrap .content {
              opacity: 0;
            }"),
      tags$style(type = 'text/css', 
          "
            .wrap:before {
              position: absolute;
              width: 1px;
              height: 1px;
              background: white;
              content: '';
              bottom: 10px;
              left: 50%;
              top: 95%;
              color: #fff;
              border-radius: 50%;
              -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
              transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
            }"),
      tags$style(type = 'text/css', 
          "
            .wrap.active {
              display: block;
              visibility: visible;
              box-shadow: 2px 3px 16px silver;
              transition: all 600ms;
              transform: translateY(0px);
              transition: all 0.5s;
            }"),
      tags$style(type = 'text/css', 
          "
            .wrap.active:before {
              height: 2000px;
              width: 2000px;
              border-radius: 50%;
              top: 50%;
              left: 50%;
              margin-left: -1000px;
              margin-top: -1000px;
              display: block;
              -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
              transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
            }"),
      tags$style(type = 'text/css', 
          "
            .wrap.active .content {
              position: relative;
              opacity: 1;
              font-size: 30px;
              transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
            }"),

      div(id = "xxx", style = 'background: rgba(0,0,0,.2); height: 20px; width: 100%', htmlOutput("xxx_Output"))
    ),
    server = function(input, output) {
      output$xxx_Output = renderText({
          paste("<script>
                            $('#xxx').on('click', function() {
                              $('.wrap').toggleClass('active');

                              return false;
                            });
                          </script>


                          <div class = 'wrap'>
                            <div class = 'contentF' id = 'content_ID'>

                            </div>
                          </div>"


                          , 
                        sep = "")

        })
    }
  ))

Однако, это прекрасно работает, если я включу amChart (как в моем Codepen: https://codepen.io/Volabos/pen/MxdRRd?&editable=true) в функции paste(),эта диаграмма вообще не видна.

Мне известно о amChart API для R / Shiny, т. е. пакете rAmChart, однако для этого может потребоваться функция bsModal() из shinyBS, но я хочу избежать этогоroute.

Я хотел бы знать, почему мой подход не работает там, где я хотел встроить код AmChart JS в тело HTML и отобразить его в теле приложения. Что можно сделать, чтобы достичь этого вышеописанным способом?

Большое спасибо за любой указатель.

Спасибо,

...