No estoy nada versado en JS, así que perdone mi débil esfuerzo en el ejemplo simple y brillante de la aplicación a continuación. Solo estoy tratando de obtener un diagrama simple de gráficos altos para representar en las filas secundarias, simplemente con el objetivo de establecer si esto se puede hacer.
El ejemplo muestra este error en la consola de DevTools: "Error no detectado: error de Highcharts n.º 13: www.highcharts.com/errors/13/"
Si alguien puede aconsejarme sobre este ejemplo o señalarme una alternativa más efectiva, sería muy apreciado (por ejemplo, poder hacer esto con ggplot en su lugar sería increíble).
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(' ' = '⊕', 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('⊕'); } else { row.child('<div id=\"container\" style=\"width:100%;height:600px;\"></div>').show(); td.html('⊖'); } });" )) }) }) shiny::shinyApp(ui,server)El error n.º 13 de Highcharts significa que no se encontró el div de representación.
Debe colocar un elemento contenedor para un gráfico antes de usar el script de creación. Por ejemplo:
<div id="container"></div> <script type='text/javascript'> document.addEventListener('DOMContentLoaded', function() { const chart = Highcharts.chart('container', { ... }); }); </script>Demostración en vivo: http://jsfiddle.net/BlackLabel/o30aL8ev/
Para cualquier persona interesada, reaccionable parece la forma más sencilla de colocar gráficos en las filas secundarias de la tabla de datos. Vea el código y el resultado a continuación:
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!") ) })