[英]Plots in Child Rows of an R/Shiny DT::DataTable
I am not at all versed in JS, so forgive my weak effort in the simple shiny app example below.我一点也不精通 JS,所以请原谅我在下面这个简单的 shiny 应用程序示例中的薄弱努力。 I am just trying to get a simple highcharts plot to render in the child rows, merely aiming to establish whether this can be done.
我只是想让一个简单的 highcharts plot 在子行中呈现,只是为了确定是否可以做到这一点。
The example gives this error in the DevTools console: "Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13/"该示例在 DevTools 控制台中给出此错误:“未捕获错误:Highcharts 错误 #13: www.highcharts.com/errors/13/”
If anyone can advise on this example or point me to a more effective alternative, it would be much appreciated (eg, being able to do this with ggplot instead would still be awesome).如果有人可以就此示例提出建议或向我指出更有效的替代方案,我们将不胜感激(例如,能够使用 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 error #13 means that rendering div not found. Highcharts错误 #13表示未找到渲染 div。
You need to place a container element for a chart before using the creation script.在使用创建脚本之前,您需要为图表放置一个容器元素。 For example:
例如:
<div id="container"></div>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
const chart = Highcharts.chart('container', {
...
});
});
</script>
Live demo: http://jsfiddle.net/BlackLabel/o30aL8ev/现场演示: http://jsfiddle.net/BlackLabel/o30aL8ev/
Here's what the app looks like to better illustrate what I am trying to do这是该应用程序的外观,以更好地说明我正在尝试做的事情
No issue with straightforward rendering of a highchart, but I am trying to figure out how I could have that chart (or any type of plot like ggplot,heatmaps,etc.) render as a child row in the data table.直接渲染 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)
For anyone interested, reactable looks like the most straightforward way to go for putting charts in data table child rows.对于任何感兴趣的人来说,reactable 看起来是 go 将图表放入数据表子行的最直接方法。 See code and result below:
请参阅下面的代码和结果:
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.