如果我有一个 html 表,其中包含根据文件中的过滤器计算的值,我是否可以根据这些值读取并生成绘图?
我不确定回答这个问题是否重要,但我主要使用 R,并使用 r 代码块从我使用创建的共享数据对象名称shared_ert计算总和crosstalk
R 的包。
<table id="example" class="cell-border" style="width:100%">
<tr>
<th>Enrolled</th>
<th>Not Enrolled</th>
</tr>
<tr>
<td>
```{r, echo=FALSE, collapse=TRUE, warning=FALSE, message=FALSE}
summarywidget::summarywidget(shared_ert,statistic = 'sum',column = 'Enrolled')
```
</td>
<td>
```{r, echo=FALSE, collapse=TRUE, warning=FALSE, message=FALSE}
summarywidget::summarywidget(shared_ert,statistic = 'sum',column = 'Not Enrolled')
```
</td>
</tr>
</table>
请注意,摘要小部件最终会在每个 td 中生成一个 span 标记。跨度看起来像<span id ="waffle" class="summarywidget html-widget html-widge-static-bound">1293</span>
所以表格最终看起来像这样:
<table id="example" class="cell-border" style="width:100%">
<tr>
<th>Enrolled</th>
<th>Not Enrolled</th>
</tr>
<tr>
<td>
<span id ="waffle" class="summarywidget html-widget html-widge-static-bound">1293</span>
<script type="application/json" data-for="waffle">
### a bunch of data appears here, from which the 1293 value is derived
</script>
</td>
<td>
<span id ="iron" class="summarywidget html-widget html-widge-static-bound">948</span>
<script type="application/json" data-for="iron">
### a bunch of data appears here, from which the 948 value is derived
</script>
</td>
</tr>
</table>
根据我对 javascript 世界的有限理解,我需要我的数据看起来像
var data = [
{
x: ['giraffes', 'orangutans', 'monkeys'],
y: [20, 14, 23],
type: 'bar'
}
];
这样我就可以得到类似以下内容的情节:
Plotly.newPlot('myDiv', data);
(直接来自https://plotly.com/javascript/bar-charts/)
如果我正确理解问题,我需要阅读 html 表example
并创建一个var
拿着桌子的。经过对 SO 和一般网络的大量搜索后,我的猜测是这里的解决方案:HTML 表格转 JSON将表格转换为正确的格式。我想
```{js}
function tableToJson(table) {
var data = [];
// first row needs to be headers
var headers = [];
for (var i=0; i<table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
}
// go through cells
for (var i=1; i<table.rows.length; i++) {
var tableRow = table.rows[i];
var rowData = {};
for (var j=0; j<tableRow.cells.length; j++) {
rowData[ headers[j] ] = tableRow.cells[j].innerHTML;
}
data.push(rowData);
}
return data;
}
var tabdata = $document.getElementById('#example').tableToJSON();
```
我认为从这里开始,我需要以绘图方式从当前状态的表中读取数据,因此我使用按钮和 onclick 生成绘图,如下所示:
<button type="button" onclick="Plotly.newPlot('myDiv',tabdata);">Make Plot</button>
单击后,会出现绘图,但任何地方都没有数据点。
我的方法可能偏离了轨道,所以我遵循最初的问题:我可以根据动态 html 表来读取并生成一个图吗?
任何帮助建立实现此目的的方法将不胜感激。