Shiny R闪亮和集成的谷歌图表_Shiny_Googlevis_R_Dataframe_Javascript_Json

Shiny R闪亮和集成的谷歌图表

shiny r dataframe javascript json

Shiny R闪亮和集成的谷歌图表,shiny,googlevis,r,dataframe,javascript,json,Shiny,Googlevis,R,Dataframe,Javascript,Json,我正在努力学习如何将谷歌图表集成到一个应用程序中，而不需要使用额外的软件包开销，也不需要自己将大部分东西放到应用程序中。下面是一个简单的Hello World示例，目前，它包含了我希望在应用程序中正确包含的元素我试图学习如何使用在对象tmp（）中创建的数据填充我正在创建的数据表。下面的应用程序可以正常工作，但目前图表是根据data对象中硬编码的数据填充的有没有一种方法可以用来填充数据数组最小可复制用户界面文件 ui <- fluidPage( titlePanel("Hell

我正在努力学习如何将谷歌图表集成到一个应用程序中，而不需要使用额外的软件包开销，也不需要自己将大部分东西放到应用程序中。下面是一个简单的Hello World示例，目前，它包含了我希望在应用程序中正确包含的元素

我试图学习如何使用在对象

tmp（）

中创建的数据填充我正在创建的数据表。下面的应用程序可以正常工作，但目前图表是根据

data

对象中硬编码的数据填充的

有没有一种方法可以用来填充数据数组

最小可复制用户界面文件

ui <- fluidPage(
    titlePanel("Hello Google Charts"),
    sidebarLayout(
        sidebarPanel(
            h1('Hello World')
        ),
    mainPanel(
        htmlTemplate("test3.html"),
        verbatimTextOutput('x')
        )
    )
)

ui为了将内容从R发送到JavaScript，必须在JavaScript脚本中使用shinny.addCustomMessageHandler
，在shinny服务器中使用session$sendCustomMessage
（请参见？shinny:：session
）
这里是一个工作应用程序
JavaScript文件shinyHandler.js，放入应用程序的www子文件夹：
$（文档）.ready（函数（）{
load（'current'，{'packages'：['gauge']}）；
google.charts.setOnLoadCallback（drawChart）；
功能图（数据）{
变量选项={
宽度：400，
身高：120，
红色：75，
雷德托：100，
发黄时间:50,，
yellowTo:75，
米诺蒂克斯：10
};
var图表=
新的google.visualization.Gauge（document.getElementById（“chart_div”）；
var gdata=新的google.visualization.DataTable（数据）；
图表绘制（gdata，选项）；
/*setInterval（函数（）{
gdata.setValue（0,1,40+Math.round（60*Math.random（））；
图表绘制（gdata，选项）；
}, 10000);
setInterval（函数（）{
gdata.setValue（1,1,40+Math.round（60*Math.random（））；
图表绘制（gdata，选项）；
}, 100);
setInterval（函数（）{
gdata.设定值（2,1,10）；
图表绘制（gdata，选项）；
}, 100); */
} 
addCustomMessageHandler（“图表”，函数（数据）{drawChart（数据）；}）；
});

还有闪亮的应用程序：
库（闪亮）
dataframe2datatable
server <- function(input, output) {
    tmp <- data.frame(v1 = rnorm(4), v2 = rnorm(4))
    output$x <- renderPrint({tmp})
} 

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {


        var data = google.visualization.arrayToDataTable([
          ['v1', 'v2'],
          ['1', -1.9372140],
          ['2', -1.5234370],
          ['3', 0.2374601],
          ['4', 1.0550744]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 75, redTo: 100,
          yellowFrom:50, yellowTo: 75,
          minorTicks: 10
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 10000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 100);
        setInterval(function() {
          data.setValue(2, 1, 10 );
          chart.draw(data, options);
        }, 100);
      }
    </script>
  </head>

  <body>
    <div id="chart_div" style="width: 400px; height: 120px;">
    </div>
  </body>
</html>