我跟随tutorial使用Rmarkdown创建一个带有迷你图的表格。
可以制作表格,但我尝试使用Rmarkdown的新功能:{.tabset}
,这样会给我一个错误。
如果我把'#34; sparktable"在第一个标签中。但是,如果我放在第二个或另一个选项卡上,表格会显示原始数据(数字)而不会显示火花。 我试图解决并寻找解决方案,但我无法......
我的测试是here。
我用来制作迷你图的选项:
# Create a vector with the sparkline visual configuration
sparkline1 <- "type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black'"
sparkbar1 <- "type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black'"
# Define the column span type to be the class "spark" first bars and after style for lines
columnDefs1 = list(list(
width = '10px',
targets = 2,
render = JS("function(data, type, full){
return '<span class=sparkmonth>' + data + '</span>'
}")),
(list(
width = '10px',
targets = c(3,4,5), # c(2,4,6,8,10,12,14,16,18),
render = JS("function(data, type, full){
return '<span class=sparkday>' + data + '</span>'
}"))
))
# Create the Callback to JS, with the configuration for the spark data with bars and lines
fnDrawCallback = JS(paste0("function (oSettings, json) { $('.sparkmonth:not(:has(canvas))').sparkline('html', { ",
sparkbar1, " });\n $('.sparkday:not(:has(canvas))').sparkline('html', { ",
sparkline1, " });\n}"), collapse = "")
Rmarkdown代码是这样的:
## Comparações detalhadas {.tabset}
### Tabela sumário
```{r summary_table, echo = FALSE}
# Translating the metrics names
ga.month.spark.table[1] <- ptcolsumm
## Making the table, Last month table
ga.month.spark.table <- datatable(ga.month.spark.table, options = list(
columnDefs = columnDefs1, fnDrawCallback = fnDrawCallback, autoWidth = FALSE, dom = 'C<"clear">t'),
caption = "Visitas ao site no último mês",
colnames = c("Métricas", "12 Meses", "YOY", "Mês Retrasado", "Mês Passado")
) # %>% formatRound(c(1,3,5,7,9,11,13,15,17), 1)
# Ploting the table
ga.month.spark.table$dependencies <- append(ga.month.spark.table$dependencies, htmlwidgets:::getDependency("sparkline"))
ga.month.spark.table
```
### test
```{r teste, echo = FALSE}
ga.month.spark.table
```
部分HTML源代码:
<div id="comparacoes-detalhadas" class="section level2 tabset">
<h2>Comparações detalhadas</h2>
<div id="tabela-sumario" class="section level3">
<h3>Tabela sumário</h3>
<p><div id="htmlwidget-9771" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-9771">{"x":{"data":[["1","2","3","4","5","6","7","8","9"],["Usuários","Sessões","Pageview Único","Pageviews","Tempo Médio","Rejeição","Taxa de Rejeição","Taxa de Saída","Tempo de carregamento"],[" 33, 78, 249, 322,1083,1354, 949, 581, 269, 133, 632, 519"," 55, 79, 252, 327,1091,1402, 957, 618, 301, 152, 734, 613"," 55, 79, 252, 335,1222,1388,1025, 669, 336, 173, 769, 671"," 87, 95, 262, 364,1233,1395,1029, 800, 421, 189, 830, 736","173.35, 18.68, 6.71, 9.88, 29.29, 3.12, 28.39, 57.53, 91.26, 22.61, 25.91, 54.44"," 40, 73, 245, 290, 908,1372, 860, 537, 237, 141, 690, 574","0.73,0.92,0.97,0.89,0.83,0.98,0.90,0.87,0.79,0.93,0.94,0.94","0.63,0.83,0.96,0.90,0.87,0.99,0.92,0.75,0.70,0.80,0.88,0.83"," 2.80, 0.00, 0.00, 0.00,12.04,14.92, 7.26,25.63, 0.00, 0.00, 0.00, 0.00"],[" 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 5, 3, 3, 5, 5, 1, 6, 4, 8, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,31, 0, 0, 3,19"," 0.00, 0.00, 0.00, 0.00, 0.00, 26.00, 0.00, 0.00, 3.25,360.25, 0.00, 0.00, 0.00, 39.75, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00"," 5, 2, 4, 3, 4, 1, 3, 3, 3, 3, 1, 6, 4, 2, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,28, 0, 0, 3,19","1.00,1.00,1.00,1.00,1.00,0.33,1.00,1.00,0.75,0.75,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.97,0.00,0.00,1.00,1.00","1.00,1.00,1.00,1.00,1.00,0.60,1.00,1.00,0.80,0.80,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.94,0.00,0.00,1.00,1.00","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],[" 1, 7, 3, 1, 1, 0, 0, 2, 3, 6, 3, 2, 1, 0, 0, 0, 2, 4, 0, 1, 1, 1,10, 0, 2, 8, 2, 4, 2"," 1, 7, 3, 1, 1, 0, 0, 2, 4,13, 6, 6, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,14, 0, 3,11, 2, 3, 4"," 1, 8, 5, 2, 2, 0, 0, 2, 4,14, 6, 8, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,42, 0, 3,11, 2, 3, 5"," 1, 9, 5, 2, 2, 0, 0, 3, 4, 14, 6, 9, 6, 0, 0, 0, 2, 4, 0, 1, 1, 1,118, 0, 3, 11, 3, 3, 10"," 0.000, 25.857, 24.667, 5.000, 11.000, 0.000, 0.000, 12.500, 0.000, 1.692, 0.000, 57.667,376.750, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000,222.143, 0.000, 0.000, 0.091,315.000, 0.000,417.250"," 1, 5, 2, 0, 0, 0, 0, 0, 4,12, 6, 5, 2, 0, 0, 0, 2, 4, 0, 1, 1, 1, 2, 0, 3,10, 1, 3, 2","1.00,0.71,0.67,0.00,0.00,0.00,0.00,0.00,1.00,0.92,1.00,0.83,0.50,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.14,0.00,1.00,0.91,0.50,1.00,0.50","1.00,0.78,0.60,0.50,0.50,0.00,0.00,0.67,1.00,0.93,1.00,0.67,0.67,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.12,0.00,1.00,1.00,0.67,1.00,0.40","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],["4,2,3,2,2,0,1,4,4,2,1,0,0,0,2,1,6,4,0,2,4,2,2,2,1,6,2,3,2,2,5","5,6,3,1,2,0,2,4,4,2,1,0,0,0,2,1,6,4,0,2,6,2,2,2,1,6,2,3,2,2,7","5,7,5,3,2,0,3,5,5,3,1,0,0,0,3,1,6,4,0,3,7,2,2,3,1,6,2,3,3,5,8"," 7, 9, 6,10, 2, 0, 5, 6, 7, 5, 1, 0, 0, 0, 3, 2, 6, 4, 0, 3, 7, 2, 2, 3, 1, 6, 2, 5, 3, 6, 8","110.80,231.17, 18.00, 72.00, 0.00, 0.00, 26.50, 68.50,141.75,539.50, 0.00, 0.00, 0.00, 0.00, 13.00, 0.00, 0.33, 0.00, 0.00, 10.50, 1.17, 0.00, 0.00,112.00, 0.00, 0.00, 0.00,350.67, 21.50, 40.50, 2.00","3,3,1,0,2,0,1,2,2,1,1,0,0,0,1,0,5,4,0,1,5,2,2,1,1,6,2,1,1,0,6","0.60,0.50,0.33,0.00,1.00,0.00,0.50,0.50,0.50,0.50,1.00,0.00,0.00,0.00,0.50,0.00,0.83,1.00,0.00,0.50,0.83,1.00,1.00,0.50,1.00,1.00,1.00,0.33,0.50,0.00,0.86","0.71,0.67,0.50,0.10,1.00,0.00,0.40,0.67,0.57,0.40,1.00,0.00,0.00,0.00,0.67,0.50,1.00,1.00,0.00,0.67,0.86,1.00,1.00,0.67,1.00,1.00,1.00,0.60,0.67,0.33,0.88","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,2.45,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> \u003c/th>\n <th>Métricas\u003c/th>\n <th>12 Meses\u003c/th>\n <th>YOY\u003c/th>\n <th>Mês Retrasado\u003c/th>\n <th>Mês Passado\u003c/th>\n \u003c/tr>\n \u003c/thead>\n\u003c/table>","options":{"columnDefs":[{"width":"10px","targets":2,"render":"function(data, type, full){\n return '<span class=sparkmonth>' + data + '\u003c/span>' \n }"},{"width":"10px","targets":[3,4,5],"render":"function(data, type, full){\n return '<span class=sparkday>' + data + '\u003c/span>' \n }"},{"orderable":false,"targets":0}],"fnDrawCallback":"function (oSettings, json) { $('.sparkmonth:not(:has(canvas))').sparkline('html', { type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black' });\n $('.sparkday:not(:has(canvas))').sparkline('html', { type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black' });\n}\n","autoWidth":false,"dom":"C<\"clear\">t","order":[],"orderClasses":false},"callback":null,"caption":"<caption>Visitas ao site no último mês\u003c/caption>","filter":"none"},"evals":["options.columnDefs.0.render","options.columnDefs.1.render","options.fnDrawCallback"],"jsHooks":[]}</script></p>
</div>
<div id="teste" class="section level3">
<h3>teste</h3>
<p><div id="htmlwidget-6406" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-6406">{"x":{"data":[["1","2","3","4","5","6","7","8","9"],["Usuários","Sessões","Pageview Único","Pageviews","Tempo Médio","Rejeição","Taxa de Rejeição","Taxa de Saída","Tempo de carregamento"],[" 33, 78, 249, 322,1083,1354, 949, 581, 269, 133, 632, 519"," 55, 79, 252, 327,1091,1402, 957, 618, 301, 152, 734, 613"," 55, 79, 252, 335,1222,1388,1025, 669, 336, 173, 769, 671"," 87, 95, 262, 364,1233,1395,1029, 800, 421, 189, 830, 736","173.35, 18.68, 6.71, 9.88, 29.29, 3.12, 28.39, 57.53, 91.26, 22.61, 25.91, 54.44"," 40, 73, 245, 290, 908,1372, 860, 537, 237, 141, 690, 574","0.73,0.92,0.97,0.89,0.83,0.98,0.90,0.87,0.79,0.93,0.94,0.94","0.63,0.83,0.96,0.90,0.87,0.99,0.92,0.75,0.70,0.80,0.88,0.83"," 2.80, 0.00, 0.00, 0.00,12.04,14.92, 7.26,25.63, 0.00, 0.00, 0.00, 0.00"],[" 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 3, 3, 3, 4, 4, 1, 6, 4, 4, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,29, 0, 0, 3,19"," 5, 2, 4, 3, 4, 5, 3, 3, 5, 5, 1, 6, 4, 8, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,31, 0, 0, 3,19"," 0.00, 0.00, 0.00, 0.00, 0.00, 26.00, 0.00, 0.00, 3.25,360.25, 0.00, 0.00, 0.00, 39.75, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00"," 5, 2, 4, 3, 4, 1, 3, 3, 3, 3, 1, 6, 4, 2, 8, 3, 1, 2,22,22, 2,17,32, 2,26,14,28, 0, 0, 3,19","1.00,1.00,1.00,1.00,1.00,0.33,1.00,1.00,0.75,0.75,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.97,0.00,0.00,1.00,1.00","1.00,1.00,1.00,1.00,1.00,0.60,1.00,1.00,0.80,0.80,1.00,1.00,1.00,0.50,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,1.00,0.94,0.00,0.00,1.00,1.00","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],[" 1, 7, 3, 1, 1, 0, 0, 2, 3, 6, 3, 2, 1, 0, 0, 0, 2, 4, 0, 1, 1, 1,10, 0, 2, 8, 2, 4, 2"," 1, 7, 3, 1, 1, 0, 0, 2, 4,13, 6, 6, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,14, 0, 3,11, 2, 3, 4"," 1, 8, 5, 2, 2, 0, 0, 2, 4,14, 6, 8, 4, 0, 0, 0, 2, 4, 0, 1, 1, 1,42, 0, 3,11, 2, 3, 5"," 1, 9, 5, 2, 2, 0, 0, 3, 4, 14, 6, 9, 6, 0, 0, 0, 2, 4, 0, 1, 1, 1,118, 0, 3, 11, 3, 3, 10"," 0.000, 25.857, 24.667, 5.000, 11.000, 0.000, 0.000, 12.500, 0.000, 1.692, 0.000, 57.667,376.750, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000, 0.000,222.143, 0.000, 0.000, 0.091,315.000, 0.000,417.250"," 1, 5, 2, 0, 0, 0, 0, 0, 4,12, 6, 5, 2, 0, 0, 0, 2, 4, 0, 1, 1, 1, 2, 0, 3,10, 1, 3, 2","1.00,0.71,0.67,0.00,0.00,0.00,0.00,0.00,1.00,0.92,1.00,0.83,0.50,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.14,0.00,1.00,0.91,0.50,1.00,0.50","1.00,0.78,0.60,0.50,0.50,0.00,0.00,0.67,1.00,0.93,1.00,0.67,0.67,0.00,0.00,0.00,1.00,1.00,0.00,1.00,1.00,1.00,0.12,0.00,1.00,1.00,0.67,1.00,0.40","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"],["4,2,3,2,2,0,1,4,4,2,1,0,0,0,2,1,6,4,0,2,4,2,2,2,1,6,2,3,2,2,5","5,6,3,1,2,0,2,4,4,2,1,0,0,0,2,1,6,4,0,2,6,2,2,2,1,6,2,3,2,2,7","5,7,5,3,2,0,3,5,5,3,1,0,0,0,3,1,6,4,0,3,7,2,2,3,1,6,2,3,3,5,8"," 7, 9, 6,10, 2, 0, 5, 6, 7, 5, 1, 0, 0, 0, 3, 2, 6, 4, 0, 3, 7, 2, 2, 3, 1, 6, 2, 5, 3, 6, 8","110.80,231.17, 18.00, 72.00, 0.00, 0.00, 26.50, 68.50,141.75,539.50, 0.00, 0.00, 0.00, 0.00, 13.00, 0.00, 0.33, 0.00, 0.00, 10.50, 1.17, 0.00, 0.00,112.00, 0.00, 0.00, 0.00,350.67, 21.50, 40.50, 2.00","3,3,1,0,2,0,1,2,2,1,1,0,0,0,1,0,5,4,0,1,5,2,2,1,1,6,2,1,1,0,6","0.60,0.50,0.33,0.00,1.00,0.00,0.50,0.50,0.50,0.50,1.00,0.00,0.00,0.00,0.50,0.00,0.83,1.00,0.00,0.50,0.83,1.00,1.00,0.50,1.00,1.00,1.00,0.33,0.50,0.00,0.86","0.71,0.67,0.50,0.10,1.00,0.00,0.40,0.67,0.57,0.40,1.00,0.00,0.00,0.00,0.67,0.50,1.00,1.00,0.00,0.67,0.86,1.00,1.00,0.67,1.00,1.00,1.00,0.60,0.67,0.33,0.88","0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,2.45,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th> \u003c/th>\n <th>Métricas\u003c/th>\n <th>12 Meses\u003c/th>\n <th>YOY\u003c/th>\n <th>Mês Retrasado\u003c/th>\n <th>Mês Passado\u003c/th>\n \u003c/tr>\n \u003c/thead>\n\u003c/table>","options":{"columnDefs":[{"width":"10px","targets":2,"render":"function(data, type, full){\n return '<span class=sparkmonth>' + data + '\u003c/span>' \n }"},{"width":"10px","targets":[3,4,5],"render":"function(data, type, full){\n return '<span class=sparkday>' + data + '\u003c/span>' \n }"},{"orderable":false,"targets":0}],"fnDrawCallback":"function (oSettings, json) { $('.sparkmonth:not(:has(canvas))').sparkline('html', { type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black' });\n $('.sparkday:not(:has(canvas))').sparkline('html', { type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black' });\n}\n","autoWidth":false,"dom":"C<\"clear\">t","order":[],"orderClasses":false},"callback":null,"caption":"<caption>Visitas ao site no último mês\u003c/caption>","filter":"none"},"evals":["options.columnDefs.0.render","options.columnDefs.1.render","options.fnDrawCallback"],"jsHooks":[]}</script></p>
</div>
第一个显示确定,但第二个选项卡(测试)一个没有...即使我更改了代码,只有第一个选项卡显示为OK。
我尝试使用disableHiddenCheck,但区别在于,数字会消失,但迷你图也不会出现。
答案 0 :(得分:1)
我将把它添加到顶部,因为错误似乎没有触发我在初始响应中询问的方法。
您可以尝试将此script
添加到rmarkdown
,这会在点击标签时调用$.sparkline_display_visible()
。我使用setTimeout
,因为它似乎很快立即调用。不幸的是,这有点不完美,因为用户会看到迷你图呈现。
<script>
$(document).ready(function () {
$('.tabbable li').on('click',function(){
setTimeout(
function(){$.sparkline_display_visible()},
100
)})
});
</script>
这不是答案,但代码太大而无法发表评论。你可以试试这件事,让我知道它是否有效?
library(shiny)
library(DT)
library(dplyr)
ptcolsumm <- mtcars %>%
group_by(cyl) %>%
summarise(hp = list(c(hp)), mpg = list(c(mpg)))
# Create a vector with the sparkline visual configuration
sparkline1 <- "type : 'line', fillColor : '#E8E8E8', lineColor : 'blue', spotRadius : 2, highlightSpotColor : 'red', highlightLineColor : 'black'"
sparkbar1 <- "type : 'bar', negBarColor : 'red', barColor : 'blue', highlightColor: 'black'"
# Define the column span type to be the class "spark" first bars and after style for lines
columnDefs1 = list(
list(
width = '10px',
targets = 2,
render = JS("function(data, type, full){
return '<span class=sparkmonth>' + data + '</span>'
}")
),
list(
width = '10px',
targets = 3,
render = JS("function(data, type, full){
return '<span class=sparkday>' + data + '</span>'
}")
)
)
# Create the Callback to JS, with the configuration for the spark data with bars and lines
fnDrawCallback = JS(sprintf(
"function (oSettings, json) {
$('.sparkmonth:not(:has(canvas))')
.sparkline(
'html',
{%s}
)
$('.sparkday:not(:has(canvas))')
.sparkline(
'html',
{%s}
)
}",
sparkbar1,sparkline1
))
## Making the table, Last month table
ga.month.spark.table <- datatable(
ptcolsumm,
options = list(
columnDefs = columnDefs1,
fnDrawCallback = fnDrawCallback,
autoWidth = FALSE,
dom = 'C<"clear">t'
)
)
# Ploting the table
ga.month.spark.table$dependencies <- append(ga.month.spark.table$dependencies, htmlwidgets:::getDependency("sparkline"))
library(htmltools)
browsable(
fluidPage(mainPanel(
tabsetPanel(
tabPanel("table",ga.month.spark.table),
tabPanel("teste",ga.month.spark.table)
)
))
)