0

我正在按照教程使用 Rmarkdown 制作带有迷你图的表格。

制作表格可以正常工作，但我正在尝试使用 Rmarkdown: 的新功能{.tabset}，这给了我一个错误。

如果我将“sparktable”放在第一个选项卡中，它工作正常。但是，如果我打开第二个或另一个选项卡，表格会显示原始数据（数字）而不显示火花。我试图解决并寻找解决方案，但我无法...

我的测试在这里。

我用来制作迷你图的选项：

# 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>

第一个显示正常，但第二个选项卡（测试）没有......即使我更改代码，只有第一个选项卡显示正常。

我尝试使用disableHiddenCheck，但不同的是，数字消失了，但迷你图也没有出现。

4

1 回答 1

1

I will add this to the top, since the error does not seem to trigger for the method I asked about in my initial response.

You could try adding this script to your rmarkdown which will call the $.sparkline_display_visible() when a tab is clicked. I used setTimeout since it seemed immediate invocation was too soon. Unfortunately, this is a little imperfect, since the user will see the sparklines render.

<script>
  $(document).ready(function () {
    $('.tabbable li').on('click',function(){
      setTimeout(
        function(){$.sparkline_display_visible()},
        100
      )})
  });
</script>

This is not an answer, but the code is too big for a comment. Could you try this for me and let me know if it works?

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)
    )
  ))
)
于 2016-04-07T15:35:46.763 回答