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

Question

我可以看到 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 图表

Answer 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, as pointed by 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>")

Answer 2

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

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

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

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

Add Interactive Chart to Shiny with HTML UI (index.html)

r

nvd3.js

shiny

rcharts

ggvis