R/Shiny DT::DataTable 子行中的繪圖

Question

我一點也不精通 JS，所以請原諒我在下面這個簡單的 shiny 應用程序示例中的薄弱努力。 我只是想讓一個簡單的 highcharts plot 在子行中呈現，只是為了確定是否可以做到這一點。

該示例在 DevTools 控制台中給出此錯誤：“未捕獲錯誤：Highcharts 錯誤 #13： www.highcharts.com/errors/13/”

如果有人可以就此示例提出建議或向我指出更有效的替代方案，我們將不勝感激（例如，能夠使用 ggplot 來代替它仍然很棒）。

library(DT)
library(shiny)

ui <-shinyUI(fluidPage(
 tags$head(tags$script(src="https://code.highcharts.com/highcharts.js")),
 tags$body(
 HTML("<script type='text/javascript'>document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>")),
DTOutput("tab")))

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

output$tab <- renderDT({datatable(
  cbind(' ' = '&oplus;', mtcars), escape = FALSE,
  options = list(
    columnDefs = list(
      list(visible = FALSE, targets = c(0, 2, 3)),
      list(orderable = FALSE, className = 'details-control', targets = 1)
    )
  ),
  callback = JS("
  table.column(1).nodes().to$().css({cursor: 'pointer'});

  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('&oplus;');
    } else {
      row.child('<div id=\"container\" style=\"width:100%;height:600px;\"></div>').show();
      td.html('&CircleMinus;');
    }
  });"
  ))
})


})

shiny::shinyApp(ui,server)

Answer 1

Highcharts錯誤 #13表示未找到渲染 div。

在使用創建腳本之前，您需要為圖表放置一個容器元素。 例如：

<div id="container"></div>

<script type='text/javascript'>
    document.addEventListener('DOMContentLoaded', function() {
        const chart = Highcharts.chart('container', {
            ...
        });
    });

</script>

---

現場演示： http://jsfiddle.net/BlackLabel/o30aL8ev/

Answer 2

這是該應用程序的外觀，以更好地說明我正在嘗試做的事情

直接渲染 highchart 沒有問題，但我試圖弄清楚如何將該圖表（或任何類型的 plot，如 ggplot、heatmaps 等）呈現為數據表中的子行。

library(DT)
library(shiny)

ui <-shinyUI(fluidPage(
  tags$head(tags$script(src="https://code.highcharts.com/highcharts.js")),
  tags$body(
    HTML("<script type='text/javascript'>document.addEventListener('DOMContentLoaded', function () {
        const chart = Highcharts.chart('container', {
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
</script>")),
  div(id="container"),
  DTOutput("tab")))

server <- shinyServer(function(input, output, session) {
  
  
 
  output$tab <- renderDT({datatable(
    cbind(' ' = '&oplus;', mtcars), escape = FALSE,
    options = list(
      columnDefs = list(
        list(visible = FALSE, targets = c(0, 2, 3)),
        list(orderable = FALSE, className = 'details-control', targets = 1)
      )
    ),
    callback = JS("
  table.column(1).nodes().to$().css({cursor: 'pointer'});

  table.on('click', 'td.details-control', function() {
    var td = $(this), row = table.row(td.closest('tr'));
    if (row.child.isShown()) {
      row.child.hide();
      td.html('&oplus;');
    } else {
      row.child('<div id=#container style=\"width:100%;height:200px;\">I can put text here, but charts would be awesome</div>').show();
      td.html('&CircleMinus;');
    }
  });"
    ))
  })
  
  
})

shiny::shinyApp(ui,server)

Answer 3

對於任何感興趣的人來說，reactable 看起來是 go 將圖表放入數據表子行的最直接方法。 請參閱下面的代碼和結果：

library(reactable)
library(highcharter)

reactable(iris[1:20, ], details =function(index) {
  VECTOR=iris[1:20,] %>% dplyr::filter(Species==as.vector(unique(iris[index,5]))) %>% select(Sepal.Length) %>% as.data.frame() %>% .[,1] 
  htmltools::div(style = "width: 1000",
                 highchart(type = "stock") %>% 
                   hc_add_series(VECTOR, type = "line"),
# sparkline(VECTOR, type = "bar", chartRangeMin = 0, chartRangeMax = max(6),width = 1000,height = 300),
  h3("Yahoo!")
 
  )
})

它看起來像什么