如何使用串扰生成带有过滤器的客户端汇总表和图形？

如何解决如何使用串扰生成带有过滤器的客户端汇总表和图形？

crosstalk 包在描述中提到它用于刷和过滤。但是，summary widget 允许计算单个汇总统计量。

既然我能够根据过滤后的数据计算单个汇总统计数据，为什么不扩展并生成基于此汇总的汇总统计数据和可视化表格？

到目前为止，我已经成功地在我的 html 输出中生成了一个表格，在表格的多个单元格中包含 summarywidget。还有一个复制按钮，允许查看者从表中选择和复制数据，仅此而已。

到目前为止我的方法：

1. 使用 group_by() 设置所有组合的数据和总计，并使用 crosstalk 创建共享数据元素。

---
title: "Stack Question"
output: html_document
---

knitr::opts_chunk$set(echo = FALSE)

library(stringr)
#library(instR)
library(dplyr)
library(plotly)
library(DT)
library(kableExtra)
library(tidyr)
library(crosstalk)

ourdata<-data.frame(Rock=c(2,2,3,3),Paper=c(1,4,5,6,7,8),Team=c("Green","Blue","Green","Blue"),Skill=c("High","High","Low","Low"),Position=c("Forward","Forward","Center","Center"))

##tables of all combinations and the associated totals
ourdata2<-ourdata%>%
  group_by(Team,Skill,Position)%>%
  summarize(Rock_Total=sum(Rock),Paper_Total=sum(Paper))

##creating crosstalk shareddata element
shared_ours<-SharedData$new(ourdata2)

2.为每个分类变量构建过滤器

## filters
bscols(widths=c(6,NA,NA),list(filter_select('Team','Team',shared_ours,~Team,multiple=FALSE)),list(filter_select('Skill','Skill',~Skill,list(filter_select('Position','Position',~Position,multiple=FALSE))
              
       )

3. 使用手动编写的 html 代码生成一个 id 为“example”的表格元素，用 summarywidget 填充每个单元格。

<table id="example" class="cell-border" style="width:100%">
<tr>
<th>Rock Total</th>
<th>Paper Total</th>
</tr>
<tr>
<td>

```{r,echo=FALSE,collapse=TRUE,warning=FALSE,message=FALSE}


summarywidget::summarywidget(shared_ours,statistic = 'sum',column = 'Rock_Total')

```
</td>

<td>

```{r,message=FALSE}

summarywidget::summarywidget(shared_ours,column = 'Paper_Total')


```


</td>
</tr>
</table>

4. 使用 javascript 版本的 datatable 来显示表格。

```{js}
$(document).ready(function() {
    $('#example').DataTable();


```

5. 使用脚本为表格生成复制按钮（因为我没有成功为 datatable 设置按钮扩展。

<script type="text/javascript">
    function selectElementContents(el) {
        let body = document.body,range,sel;
        if (document.createrange && window.getSelection) {
            range = document.createrange();
            sel = window.getSelection();
            sel.removeAllRanges();
            try {
                range.selectNodeContents(el);
                sel.addRange(range);
            } catch (e) {
                range.selectNode(el);
                sel.addRange(range);
            }
        } else if (body.createTextRange) {
            range = body.createTextRange();
            range.movetoElementText(el);
            range.select();
        }
        document.execCommand("copy");}

</script>



<button type="button" onclick="selectElementContents( document.getElementById('example') 
);">copy Table</button>
<br>
<br>

就目前而言，我不是我想要的地方。是的，有一个可复制的表，其中包含 crosstalk 过滤产生的汇总统计信息，但该表缺乏风格，而且笨重且手动生成。到目前为止，我不知道如何使用 plotly（或类似的）获得视觉效果来响应此汇总表中的结果。我已经想到了几种可能解决的方法，希望有人能告诉我是否可行以及如何实施！

可能的解决方案：

我可以制作包含 summarywidgets 的数据框吗？这样，我可以在生成带有 DT 的表格和带有 plotly 的图形时引用这个新数据框，并且我会很高兴地回到我的默认 r 编码形式。
如果没有，我可以通过在手动生成的 html 表中包含 summarywidgets 来解决这个问题吗（如上所示）？那么，有没有办法将这个手动创建的 html 表作为 plotly 或 DT 的数据参数的数据源？（附带问题：如果这是要走的路，是否有一种更少手动的方法来制作小部件并将其放入 html 表中？）
是否有一个严格的带有过滤器的客户端摘要解决方案，使这里的最终目标可以实现？

预先感谢您的帮助！