[英]Plots in Child Rows of an R/Shiny DT::DataTable
我一点也不精通 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(' ' = '⊕', 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)
Highcharts错误 #13表示未找到渲染 div。
在使用创建脚本之前,您需要为图表放置一个容器元素。 例如:
<div id="container"></div>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
const chart = Highcharts.chart('container', {
...
});
});
</script>
直接渲染 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(' ' = '⊕', 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:200px;\">I can put text here, but charts would be awesome</div>').show();
td.html('⊖');
}
});"
))
})
})
shiny::shinyApp(ui,server)
对于任何感兴趣的人来说,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!")
)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.