Jquery 如何使用javascript操作闪亮的服务器响应_Jquery_R_Highcharts_Shiny

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

jquery r highcharts shiny

Jquery 如何使用javascript操作闪亮的服务器响应,jquery,r,highcharts,shiny,Jquery,R,Highcharts,Shiny,这是一个用jquerymobile和highcharts编写的UI <!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" />

这是一个用jquerymobile和highcharts编写的UI

<!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>

其中table是html文档中接收并正确显示服务器响应的div元素的id。它只是告诉我它是一个HTLMDiv元素或一个HTMLTable元素。此外，目前并没有使用highcharts库中的条形图显示该图，我更喜欢使用highcharts而不是rCharts

当我尝试使用以下预定义值访问html表时，也会出现相同的问题：$'datatable'.val[1]或document.getElementByIddatatable或任何数字。它返回null click at click ME以显示服务器响应，以查看它给出了什么

唯一的区别是，在将document.getElementByIddatatable（其中datatable是html表格参数的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库中

将document.getElementByIdtable更改为$.shinny-html-output.html时，我可以查看存储在HTMLDiv中的onclick值但操纵和绘制数据仍然是一个问题。令人惊讶的是，数据存储在一个html表中，这个html表是用xtable压缩生成的类数据表边界表

但是，在尝试$.data表边框的table-Condented.val时，数据仍然不可用

更新：

艺术是强大的！，您可以使用rCharts重写您的Shining应用程序，因为它包含复制条形图和高图的代码，如下图所示：

调用Shining时，似乎没有加载datatable，因此请尝试确保已加载DOM。我刚刚添加了$document.readyfunction{console.log ready！；}；在head标记中查看dom何时准备就绪，并猜一猜：html文档似乎永远不会准备就绪！您在控制台中收到任何错误吗？好的，dom准备好了，这是我的错误。我认为问题来自这样一个事实，即在html页面的源代码中看不到闪亮的输出，因此无法使用Javascript访问。这里似乎处理了类似的情况：当ui不是html ui时。我不知道如何用html ui做类似的事情

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())
    })

})

document.getElementById("table")