在嵌入了HTML的Shiny应用程序中包含AmChart

Question

我正在尝试在Shiny app中创建一个弹出窗口，该弹出窗口应包含使用AmChart创建的简单绘图。以下是我的裸机Shiny应用程序，没有任何内容：

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 = "")

        })
    }
  ))

这工作得很好，但是，如果我在paste()函数中包含amChart（如我的Codepen：https://codepen.io/Volabos/pen/MxdRRd?&editable=true），则该图表完全不可见。

我知道用于R / Shiny的amChart API，即rAmChart软件包，但是可能需要bsModal()中的shinyBS函数，但我想避免采用这种方法。

我想知道为什么我的方法无法在将AmChart JS代码嵌入HTML主体并将其呈现在App主体中的地方起作用。以上述方式可以做到这一点？

非常感谢任何指针。

谢谢