R语言 在闪亮的应用程序中显示嵌入到数据表(DT)中的条形图

toe95027  于 2023-02-10  发布在  其他
关注(0)|答案(1)|浏览(177)

我希望能够在我的R shiny应用程序中输出一个数据表,在最后一列中包含一个条形图。
我找到了this answer,这几乎是我想做的,但我不知道JS,不能翻译它为我工作。
这是目前为止我所拥有的代码,但我知道我需要编辑代码的render = JS()部分,但我不确定如何编辑

# Prepare the Sample data
test_data <-
  data.table(
    Rank = c('1', '2', '3', '4', '5'),
    Domain = c('children', 'adults', 'income', 'flooded', 'tenure'),
    Quantile = c(1, 5, 6, 2, 1)
  )

# Define the Shiny UI and Custom CSS Elements
ui <- fluidPage(tags$head(tags$style(
  HTML(
    "
      .bar-chart-bar {
          background-color: #e8e8e8;
          display: block;
          position:relative;
          width: 100%;
          height: 20px;
      }
      .bar {
          float: left;
          height: 100%;
      }
      .bar1 {
          background-color: green;
      }
    "
  )
)), DT::dataTableOutput("test_table"))

# Rendering the DataTable in Shiny Server
server <- function(input, output) {
  output$test_table <- DT::renderDT({
    dt <-  DT::datatable(
      as.data.frame(test_data),
      rownames = FALSE,
      options = list(columnDefs = list(list(
        targets = -1,
        render =
          JS(
            "function(data, type, row, meta){
                        return $('<div></div>', {
                            'class': 'bar-chart-bar'
                        }).append(function(){
                            var bars = [];
                            for(var i = 1; i < row.length; i++){
                                bars.push($('<div></div>',{
                                    'class': 'bar ' + 'bar' + i
                                }).css({
                                    'width': row[i] + '%'
                                }))
                            }
                            return bars;
                        }).prop('outerHTML')
                    }"
          )
      )))
    )
  })
}

# Run the App
shinyApp(ui, server)

这是我希望我的输出看起来像:enter image description here
任何帮助都将不胜感激:)。

jogvjijk

jogvjijk1#

另见评论意见。

library(shiny)
library(DT)

# Prepare the Sample data
test_data <-
  data.frame(
    Rank = c("1", "2", "3", "4", "5"),
    Domain = c("children", "adults", "income", "flooded", "tenure"),
    Quantile = c(1, 5, 6, 2, 1)
  )

# Define the Shiny UI and Custom CSS Elements
ui <- fluidPage(
  tags$head(tags$style(HTML(
    "
      .bar-chart-bar {
          background-color: #e8e8e8;
          display: block;
          position:relative;
          width: 100%;
          height: 20px;
      }
      .bar {
          background-color: red;
          float: left;
          height: 100%;
      }
    "
  ))), 
  DTOutput("test_table")
)

js <- '
function(data, type, row, meta) {
  return $("<div></div>", {
    class: "bar-chart-bar"
  })
    .append(
      $("<div></div>", {
        class: "bar"
      }).css({
        width: (10*data) + "%"
      })
    )
    .prop("outerHTML");
}
'

# Rendering the DataTable in Shiny Server
server <- function(input, output, session) {
  output$test_table <- renderDT({
    dt <- datatable(
      test_data,
      rownames = FALSE,
      options = list(
        columnDefs = list(
          list(
            targets = 2,
            render = JS(js)
          )
        )
      )
    )
  })
}

# Run the App
shinyApp(ui, server)

相关问题