javascript - R闪亮和集成的谷歌图表

问题描述

我正在努力学习如何将 Google Charts 集成到一个闪亮的应用程序中，而无需使用googlevis包的额外开销并将大多数东西自己烘焙到应用程序中。下面是一个简单的 Hello World 示例，目前，它具有我想要正确包含在应用程序中的元素。

我正在尝试学习如何使用在对象中创建的rtmp()数据来填充我正在创建的数据表。下面的应用程序可以工作，但图表现在是从对象中硬编码的数据中填充的data。

有没有办法可以使用我的r 数据框来填充数据数组？

最小的可重现 ui 文件

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

最小的可重现服务器文件

server <- function(input, output) {
    tmp <- data.frame(v1 = rnorm(4), v2 = rnorm(4))
    output$x <- renderPrint({tmp})
}

HTML 文件 test3.html

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

标签： javascriptrjsonshinygooglevis

解决方案

为了从 R 向 JavaScript 发送内容，您必须Shiny.addCustomMessageHandler在 JavaScript 脚本和session$sendCustomMessageShiny 服务器中使用（请参阅参考资料?shiny::session）。

这是一个工作应用程序。

JavaScript 文件shinyHandler.js，放入应用程序的www子文件夹：

$(document).ready(function(){
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart(data) {

    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"));

    var gdata = new google.visualization.DataTable(data);
    chart.draw(gdata, options);

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

  Shiny.addCustomMessageHandler("chart", function(data){drawChart(data);});

});

还有闪亮的应用程序：

library(shiny)

dataframe2datatable <- function(dat){
  list(
    rows = lapply(1:nrow(dat), function(i){
      list(c = lapply(unname(as.list(dat[i,])), function(x) list(v = x)))
    }),
    cols = lapply(names(dat), function(x){
      list(
        label = x, 
        type = ifelse(mode(dat[[x]]) == "character", "string", "number")
      )
    })
  ) 
}

dat <- data.frame(
  v1 = as.character(1:4),
  v2 = rnorm(4),
  stringsAsFactors = FALSE
)

ui <- fluidPage(
  tags$head(
    tags$script(src = "https://www.gstatic.com/charts/loader.js"),
    tags$script(src = "shinyHandler.js")
  ),
  br(),
  actionButton("draw", "Draw chart"),
  br(),
  div(id = "chart_div")
)

server <- function(input, output, session){

  observeEvent(input[["draw"]], {
    session$sendCustomMessage("chart", dataframe2datatable(dat))
  })

}

shinyApp(ui, server)

javascript - R闪亮和集成的谷歌图表

问题描述

解决方案

推荐阅读