使用 HTML UI (index.html) 将交互式图表添加到 Shiny答案

【问题标题】：Add Interactive Chart to Shiny with HTML UI (index.html)使用 HTML UI (index.html) 将交互式图表添加到 Shiny
【发布时间】：2015-02-15 11:46:48
【问题描述】：

我可以看到 ggvis、rCharts 等如何适应 server.r + ui.r 结构。我现在正在尝试制作一个 HTML UI，但我无法找到有关将交互式图表传递给 HTML UI 的任何线索。有什么线索吗？

针对 ggvis、rCharts、NBD3 进行了调查。没有调查阴谋。避免使用 googleVis。

Evan Farrell 之前曾问过类似的问题，但没有回应 - https://groups.google.com/forum/#!topic/ggvis/GsZQRl3VOZ4

编辑：这些需要自定义绑定吗？有更简单的选择吗？我认为输出将是 javascript 生成的 SVG，那么库是否不可能手动包含并且 SVG 只是绑定到 div 元素？

编辑 2：我能否以某种方式将我的数据集传递给 UI，并在 index.html 本身中构建一个 D3 图表

【问题讨论】：

您可以通过简单的 google 搜索找到很多示例。首先，请转到此页面的末尾：'ggvis.rstudio.com/interactivity.html'，其中包含一个基本的 ggvis/shiny 示例。
感谢@hvollmeier，我正在努力将 ui.r 部分转换为适用于 HTML UI 的东西。你对此有什么建议吗？
如果您使用 html-ui，则根本不应该有 ui.r 文件。您基本上将 index.html 文件替换为“www”目录（这是项目目录的子目录）中的“ui.r”文件。看看这个链接shiny.rstudio.com/articles/html-ui.html
是的，我也明白。你现在能帮忙把这两个拼凑起来吗？我可以编写一个 HTML UI，我可以通过 ui.r 绘制 ggvis。现在如何通过 HTML UI 绘制 ggvis？

标签： r shiny nvd3.js rcharts ggvis

【解决方案1】：

您可以找到here 的示例，例如使用 ggvis 发光：

library(shiny)
library(ggvis)

runApp(list(

  ui={
    library(ggvis)
    shinyUI(pageWithSidebar(
      div(),
      sidebarPanel(
        sliderInput("n", "Number of points", min = 1, max = nrow(mtcars),
                    value = 10, step = 1),
        uiOutput("plot_ui")
      ),
      mainPanel(
        htmlOutput("ggvis_plot"),
        tableOutput("mtc_table")
      )
    ))

  },

  server={
    library(ggvis)
    shinyServer(function(input, output, session) {

      output$ggvis_plot <- renderUI({
        ggvisOutput("plot1")
      })
      # A reactive subset of mtcars
      mtc <- reactive({ mtcars[1:input$n, ] })
      # A simple visualisation. In shiny apps, need to register observers
      # and tell shiny where to put the controls
      mtc %>%
        ggvis(~wt, ~mpg) %>%
        layer_points() %>%
        bind_shiny("plot1")
      output$mtc_table <- renderTable({
        mtc()[, c("wt", "mpg")]
      })
    })
  }
))

要将其转换为 html-UI、闪亮的项目，您需要创建一个具有以下结构的目录（如 here 所述，hvollmeier 指出）：

<shinnyappName>
|-- www
     |-- index.html
|-- server.R

服务器部分将保持不变。对于我们的示例，index.html 部分类似于：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.11.1];ionrangeslider[2.0.2];bootstrap[3.3.1]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<link href="shared/ionrangeslider/css/normalize.css" rel="stylesheet" />
<link href="shared/ionrangeslider/css/ion.rangeSlider.css" rel="stylesheet" />
<link href="shared/ionrangeslider/css/ion.rangeSlider.skinShiny.css" rel="stylesheet" />
<script src="shared/ionrangeslider/js/ion.rangeSlider.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>

</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div></div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <form class="well">
          <div class="form-group shiny-input-container">
            <label class="control-label" for="n">Number of points</label>
            <input class="js-range-slider" id="n" data-min="1" data-max="32" data-from="10" data-step="1" data-grid="true" data-grid-num="7.75" data-grid-snap="false" data-prettify-separator="," data-keyboard="true" data-keyboard-step="3.2258064516129"/>
          </div>
          <div id="plot_ui" class="shiny-html-output"></div>
        </form>
      </div>
      <div class="col-sm-8">
        <div id="ggvis_plot" class="shiny-html-output"></div>
        <div id="mtc_table" class="shiny-html-output"></div>
      </div>
    </div>
  </div>
</body>
</html>

如果您将 shinyUI 生成的 html 页面保存为 index.html 并根据您的需要进行修改并删除任何多余和不受欢迎的内容，您应该编写或得到什么。

 library(shiny)
 runApp("<shinyAppName>")

【讨论】：

谢谢@Stanislav。我能够正确看到表格，但没有散点图。 div plot-gear-icon 已填充，但 div plot 为空。运行时看到相同的结果吗？
是的，但是当我在另一台计算机上尝试它时，我必须首先使用 ui.R 运行整个示例，可能是为了生成所有包含。
通过包含，您是指脚本和 CSS 的来源（我是新手 :)）？之前运行 ui 对我来说不是一个选项，因为我也必须与其他人共享这个应用程序。
完成：从 ui.R 中删除了“ggvisOutput”，现在可以使用了。
我不明白。 HTML UI 对我不起作用。我根本没有测试 UI.r。

【解决方案2】：

您可以使用 Shiny、ggplot2 和 Plotly 生成基于 Web 的交互式绘图。绘图使用 D3.js 渲染，可以是embedded in HTML。

一般来说，这意味着您有两种选择。首先，生成一个带有交互式图表的 Shiny 应用程序并嵌入整个应用程序。其次，从 Shiny 应用程序或using ggplot2 中生成交互式图形，然后嵌入该图形。

有关使用 Shiny 创建交互式图形的代码和说明，请参阅 this tutorial。这种方法可以让您制作这样的交互式图表：

【讨论】：