闪亮：如何在数据表中显示条形图

Question

我希望在数据表中显示一张条形图。这个链接展示了使用JavaScript实现的效果。我对JavaScript和HTML没有任何了解，你能否告诉我是否可以使用Shiny来实现这个目标？

该网站上的代码如下：

HTML代码：

<table id="dTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Languages</th>
            <th>Positive</th>
            <th>Neutral</th>
            <th>Negative</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>English</td>
            <td>50</td>
            <td>20</td>
            <td>25</td>
        </tr>
        <tr>
            <td>German</td>
            <td>25</td>
            <td>10</td>
            <td>12</td>
        </tr>
        <tr>
            <td>French</td>
            <td>20</td>
            <td>20</td>
            <td>17</td>
        </tr>
        <tr>
            <td>Spanish</td>
            <td>22</td>
            <td>4</td>
            <td>10</td>
        </tr>
    </tbody>
</table>

JAVASCRIPT:

$(function(){
    $("#dTable").dataTable({
        "columns": [
                {
                    "title":"Languages"
                },
                {
                    "title":"Votes",
                    "render": function(data, type, row, meta){
                        return parseInt(row[1], 10) + parseInt(row[2], 10) + parseInt(row[3], 10)
                    }
                },
                {
                    "visible":false
                },
                {
                    "title": "Positive/Neutral/Negative",
                    "sortable":false,
                    "render": 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")
                    }
                }
        ]
    });
});

- SBista

---

你可以在这里找到很多例子：http://leonawicz.github.io/HtmlWidgetExamples/ex_dt_sparkline.html - Pork Chop

@PorkChop 感谢您提供的链接，但是sparkline似乎没有水平堆叠条形图的选项。 - SBista

Answer 1

这是如何在R shiny中实现提供的Javascript示例的方法。

基本上，您需要将JS函数添加到columnDefs的render选项中，同时执行renderDataTable。

以下是示例代码 -

# Prepare the Sample data
test_data <-
  data.table(
    Languages = c('English', 'German', 'French', 'Spanish'),
    Positive = c(50, 25, 20, 22),
    Neutral = c(20, 10, 20, 4),
    Negative = c(25, 12, 17, 10)
  )

# 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;
      }
      .bar2 {
          background-color: yellow;
      }
      .bar3 {
          background-color: red;
      }
    "
  )
)), DT::dataTableOutput("test_table"))

# Rendering the DataTable in Shiny Server

server <- function(input, output) {
  output$test_table <- DT::renderDataTable({
    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)

- Shubham

---

需要使用库htmlwidgets。library(htmlwidgets) - Kipras Kančys