这是一个用jquery mobile&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>
#
这是用闪亮的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元素。此外，图形不使用高图表库中的条形图显示（目前，我更喜欢使用高图表而不是 rCharts）。
当我尝试使用预定义值访问具有预定义值的 html 表时，会出现同样的问题：$('#datatable').val() [1] or document.getElementById("datatable") 或任何数字。它返回null（单击"单击我以显示服务器响应"以查看它给出的内容）。
唯一的区别是，在这种情况下，将document.getElementById("datatable")（其中datatable是html表的id）参数传递给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.getElementById("table")更改为$(".shiny-html-output").html()时查看存储在HTMLDiv中的（onclick）值 但操纵和绘制数据仍然是一个问题。令人惊讶的是，数据存储在用 xtable 生成的类data table table-bordered table-condensed的 html 表中。
但是，尝试$(".data table table-bordered table-condensed").val()时数据仍然不可用
更新：
rCharts功能强大！，您可以使用rCharts重写您的Shiny应用程序，因为它包含复制条形图的代码，如下所示：http://rstudio-pubs-static.s3.amazonaws.com/5548_c3b680696b084e5db17eecf8c079a3c1.html