＃

Question

这是一个用jquery mobile＆amp; amp; highcharts。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 " charset="UTF-8" >
  <link rel="stylesheet" href="shared/jquery.mobile-1.4.2.min.css" />
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/jquery.mobile-1.4.2.min.js" type="text/javascript" > </script> 
  <script src="shared/shiny.js" type="text/javascript"></script>
  <script src="shared/highcharts.js" type="text/javascript"></script>
  <script src="shared/data.js" type="text/javascript"></script>
  <script src="shared/exporting.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
  <script type="text/javascript">

$(function () {

    $('#mygraph').highcharts({
        data: {
            table: document.getElementById("datatable")
        },
        chart: {
            type: 'column'
        },
        title: {
            text: "Data extracted from an HTML balise"
        }
    });

});
    </script>
</head>

<body>

  <h1>HTML UI with jquery mobile & Shiny:</h1>
  <div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a" >
  <p>
    <strong>Distribution:</strong>
    <select name="dist" data-native-menu=false >
      <option value="norm">Normal</option>
      <option value="unif">Uniform</option>
      <option value="lnorm">Log-normal</option>
      <option value="exp">Exponential</option>
    </select> 
    <strong>Number of observation:</strong>
    <input maxlength="4" type="number" name="n"   />
  </p>
 <p>
    <strong>Summary of the distribution:</strong>
  </p>
  <pre id="summary" class="shiny-text-output"></pre> 
  </p>
  <input data-inline=true type="button" value="CLICK ME TO DISPLAY SERVER RESPONSE" onclick='alert(document.getElementById("table"));'/>
  <p>
  </div></div>
   <div class="ui-block-b"><div class="ui-bar ui-bar-a" >
  <div id="mygraph" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  <table id="datatable">
  <thead>
        <tr>
            <th>Fruits</th>
            <th>Jane</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Apples</th>
            <td>3</td>
        </tr>
        <tr>
            <th>Pears</th>
            <td>2</td>  
        </tr>
        <tr>
            <th>Plums</th>
            <td>5</td>
        </tr>
        <tr>
            <th>Bananas</th>
            <td>1</td>  
        </tr>
        <tr>
            <th>Oranges</th>
            <td>2</td>  
        </tr>
    </tbody>
</table>
<div id="table" name="mytable" class="shiny-html-output"></div>
</div></div>
</div>
</body>
</html>

＃

这是用闪亮的r包编写的服务器端：

library(shiny)

# Define server logic for random distribution application
shinyServer(function(input, output) {
  data <- reactive({
    dist <- switch(input$dist,
                   norm = rnorm,
                   unif = runif,
                   lnorm = rlnorm,
                   exp = rexp,
                   rnorm)

    dist(input$n)

  })


  # Generate a summary of the data
  output$summary <- renderPrint({
    summary(data())
  })

  # Generate an HTML table view of the data
  output$table <- renderTable({
    data.frame(x=data())
    })

})

＃

我的问题是我无法使用此javascript函数访问闪亮的输出值

document.getElementById("table")

其中table是html文档中div元素的id，它接收并正确显示闪亮的服务器响应。它只是说我是HTLMDiv元素或HTMLTable元素。此外，图表不会使用高图库中的条形图显示（现在，我更喜欢使用highcharts而不是rCharts）。

当我尝试使用预定义值访问带有$('#datatable').val() [1] or document.getElementById("datatable")或其他数字的html表时，会出现同样的问题。它返回null（单击“点击我显示服务器响应”以查看它给出的内容）。

唯一的区别是，在将document.getElementById("datatable")（其中datatable是html table的id）参数传递给highcharts函数后，在这种情况下正确显示了数字。

最后，即使数字按预期显示，如何确保highcharts会被反应？

有人可以帮我弄清楚我的代码有什么问题吗？

谢谢，

注意：为了正确显示这个例子;您需要下载以下js和css库：jquery.mobile-1.4.2.min.css，jquery.mobile-1.4.2.min.js，highcharts.js，data.js，exporting.js（最后3个js位于highcharts库中）

Answer 1

我可以在将HTMLDiv更改为document.getElementById("table")时查看（onclick）存储在$(".shiny-html-output").html()中的值但操纵和绘制数据仍然是一个问题。令人惊讶的是，数据存储在使用data table table-bordered table-condensed生成的类xtable的html表中。

但是，尝试$(".data table table-bordered table-condensed").val()

时，数据仍然无法使用

更新：

rCharts功能强大！你可以用rCharts重写你的Shiny应用程序，因为它包含重现条形图的代码a la highcharts就像这样：http://rstudio-pubs-static.s3.amazonaws.com/5548_c3b680696b084e5db17eecf8c079a3c1.html

如何使用javascript操纵闪亮的服务器响应

＃

＃

1 个答案: