可以使用动态 html 表作为源数据吗?

2023-12-02

如果我有一个 html 表,其中包含根据文件中的过滤器计算的值,我是否可以根据这些值读取并生成绘图?

我不确定回答这个问题是否重要,但我主要使用 R,并使用 r 代码块从我使用创建的共享数据对象名称shared_ert计算总和crosstalkR 的包。

<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 表来读取并生成一个图吗?

任何帮助建立实现此目的的方法将不胜感激。


您需要使用密钥生成 jsonx & y。所以在这里x值将是您的标头,即:th标签和y值将是td价值观。现在,如果表中只有一行,您可以简单地创建JSON 对象然后使用键将值推入其中,即:数据[“x”],数据[“y”]..etc .

演示代码 :

function tableToJSON(table) {
  var data = {}; //create obj
  data["x"] = [] //for x & y
  data["y"] = []
  data["type"] = "bar"
  for (var i = 0; i < table.rows[0].cells.length; i++) {
    data["x"].push(table.rows[0].cells[i].innerHTML.toLowerCase().trim()); //push x values
  }
  for (var i = 1; i < table.rows.length; i++) {
    var tableRow = table.rows[i];
    for (var j = 0; j < tableRow.cells.length; j++) {
      data["y"].push(parseInt(tableRow.cells[j].querySelector(".summarywidget").textContent.trim()));
      //push y values
      console.log(tableRow.cells[j].querySelector(".summarywidget").textContent.trim())
    }
  }

  return data;
}

function draw() {
  var tabdata = tableToJSON(document.getElementById('example'));
  tester = document.getElementById('tester');
  Plotly.newPlot(tester, [tabdata])
}
<script src="https://cdn.plot.ly/plotly-2.1.0.min.js"></script>
<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>

<button type="button" onclick="draw()">Make Plot</button>
<div id="tester" style="width:600px;height:250px;"></div>

现在,如果表中有多行,则需要生成JSON 数组那个值。为此你需要保留main_array然后在每次迭代时将值推送到此 main_array 中。

演示代码 :

function tableToJSON(table) {
  var main_array = [] //for main array
  var for_x = [] //for x values
  for (var i = 0; i < table.rows[0].cells.length; i++) {
    for_x.push(table.rows[0].cells[i].innerHTML.toLowerCase().trim()); //push value 
  }
  for (var i = 1; i < table.rows.length; i++) {
    var tableRow = table.rows[i];
    var data = {}; //create obj..
    data["y"] = [] //for y values
    for (var j = 0; j < tableRow.cells.length; j++) {
      data["y"].push(parseInt(tableRow.cells[j].innerHTML.trim())); //push y values
    }
    //save other values..
    data["x"] = for_x
    data["type"] = "bar"
    data["name"] = "Rows" + i
    main_array.push(data) //push values in main array
  }
  //console..[{},{}..]
  return main_array;

}

function draw() {
  var tabdata = tableToJSON(document.getElementById('example'));
  tester = document.getElementById('tester');
  //pass it here
  Plotly.newPlot(tester, tabdata, {
    barmode: 'stack'
  })
}
<script src="https://cdn.plot.ly/plotly-2.1.0.min.js"></script>
<table id="example" class="cell-border" style="width:100%">
  <tr>
    <th>Enrolled</th>
    <th>Not Enrolled</th>
  </tr>
  <tr>
    <td>
      123
    </td>
    <td>
      125
    </td>
  </tr>
  <tr>
    <td>
      121
    </td>
    <td>
      127
    </td>
  </tr>
</table>

<button type="button" onclick="draw()">Make Plot</button>
<div id="tester" style="width:600px;height:250px;"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可以使用动态 html 表作为源数据吗? 的相关文章

随机推荐

  • Android 中的 SAX XML 解析

    XML 代码是
  • 在laravel中导入vue包

    在 laravel 5 6 中导入 vue 包的正确方法是什么 它预装了 vue 和 bootstrap 我看到它们都是从 public 目录编译到 app js 中的 但我可以弄清楚如何导入https github com moreta
  • Xcode“应用程序窗口预计在应用程序启动结束时有一个根视图控制器”错误

    我对此很陌生 我正在制作我的第一个应用程序 当我尝试运行它时 xcode 说它成功了 但模拟器只是给我一个黑屏 然后我收到此消息 这是我的 main m 代码 implementation ViewController synthesize
  • 获取 PHP 中常量的定义类

    我想使用反射来获取 PHP 中的类定义的常量列表 目前使用反射我可以获得常量列表 但这也包括在继承类中声明的常量 有没有一种方法我可以使用 给定一个类 仅获取该类定义的常量 给定一个常量和一个类 检查该常量是否由该类定义 不是继承或扩展的父
  • 如何防止 Eclipse 在启动时挂起?

    我正在使用 Eclipse 3 3 Europa 有时 Eclipse 需要花费非常长的时间 也许永远 来启动 我在 Eclipse 日志中唯一能看到的是 ENTRY org eclipse core resources 2 10035 2
  • 船不会发射子弹蟒蛇速成课程第二版

    您好 我将不胜感激您提供有关为什么子弹没有发射的帮助 我按照书中的所有步骤操作 但它不起作用 Bullet py文件是新编写的 settings py中的 bullet settings 也是新编写的 并且alien invasion py
  • iOS测量网页加载时间

    我搜索了很多 但找不到用 iOS 测量网页加载时间的方法 在应用程序中 我想显示特定的页面加载时间 iOS sdk 或第三方 sdk 是否可以 Thanks 您可以加载 URL 请求并使用 NSDate 来查看花费了多长时间 假设您使用 U
  • 转换为 JSON 时对象属性消失[重复]

    这个问题在这里已经有答案了 这是我的班级 export class Patient constructor public id number public name string public location string public
  • 有连续的 Future.find 吗?

    我有一些副作用功能 def f Future Int val n Random nextInt println s Generated n Future n 我想重复执行它 直到谓词返回 true def success n Int Boo
  • 访问 R 中的零元素有什么作用?

    如果我有一个向量a lt c 3 5 7 8 and run a 1 毫不奇怪我会得到 3 但如果我会跑a 0 我基本上得到numeric 0 这是什么意思 这有什么作用 出于正常原因我该如何使用它 其他人已经回答了什么x 0 确实如此 所
  • 在 Angular js 的控制器中绑定 Twitter Bootstrap datepicker 的模型值

    我正在使用 Angular js 和 Twitter Bootstrap 构建一个应用程序 HTML div div
  • 从字符串数组中提取数字

    我有一个字符串数组 scala gt tokens res34 Array String Array The value of your profile is 234 2 You have potential to gain 8 3 mor
  • 从 C# WinForms 应用程序打开 VC++ 表单时出现选项卡导航问题

    我有一个 C 应用程序 具有各种输入控件 文本框 组合框 按钮等 以及选项卡控件 在其中一个选项卡中 我嵌入了一个非托管 C 窗口 C 窗口也几乎没有输入控件 使用 Tab 键 我可以导航到 C 控件 不会出现任何问题 但是 当我在 C 窗
  • 如何使用 PHP 查找序列中缺失的值?

    假设您有一个数组 value gt timestamp 这些值随着时间的推移而增加 但可以随时重置 例如 array array 1 gt 6000 2 gt 7000 3 gt 8000 7 gt 9000 8 gt 10000 9 gt
  • 函数必须只有一个参数

    我已经很长时间没有用 C 编写代码了 我正在尝试修复一些旧代码 我收到错误 TOutputFile TOutputFile operator lt lt TOutputFile T must have exactly one argumen
  • sympy autowrap(cython):参数数量的限制,数组形式的参数?

    我有以下问题 我想使用 autowrap 生成 sympy 矩阵的编译版本 其中单元格包含 sympy 表达式 根据我的问题的具体说明 参数的数量可能会变得非常大 我遇到了以下两个问题 autowrap 接受的参数数量似乎限制为 509 即
  • 生成最多一定数量的素数列表

    我正在尝试生成 10 亿以下的素数列表 我正在尝试这个 但这种结构非常糟糕 有什么建议么 a lt 1 1000000000 d lt 0 b lt for i in a for j in 1 i if i j 0 d lt c d i 乔
  • 防止 Apache 对 gzip 内容进行分块

    当在 Apache2 中使用 mod deflate 时 Apache 将对 gzip 内容进行分块 设置 Transfer encoding chunked 标头 虽然这会加快下载时间 但我无法显示进度条 如果我自己在 PHP 中处理压缩
  • 如何从 Javascript 中删除tinymce编辑器按钮?

    我正在使用 TinyMCE4 3 10 作为 Wordpress 4 5 4 的一部分 我使用以下代码创建一个自定义的tinymce编辑器 tinyMCE execCommand mceAddEditor false captionId t
  • 可以使用动态 html 表作为源数据吗?

    如果我有一个 html 表 其中包含根据文件中的过滤器计算的值 我是否可以根据这些值读取并生成绘图 我不确定回答这个问题是否重要 但我主要使用 R 并使用 r 代码块从我使用创建的共享数据对象名称shared ert计算总和crosstal