javascript - 将动态 HTML 表格转换为谷歌图表？

Question

我有一个 ASP.NET Core 网站，它从模型中获取数据并创建一个动态 HTML 表以将其显示在页面上。我在页面上有 3 个选择列表，用于确定对所显示数据的过滤:

 <select id="Timeframe" name="Timeframe" asp-for="timeframe" asp-items="@Model.timeframes"></select>
 <select id="Category" name="Category" asp-for="category" asp-items="@Model.categories"></select>
 <select id="FormOption" name="FormOption" asp-for="formOption" asp-items="@Model.formOptions"></select>

构建表格的代码如下。过滤器决定向表中添加(和填充)多少行和列。

<div>
    @if (Model.selectedForm.rows.Count > 0)
    {
        <table name="Displaytable">
            <tr>
                <th></th>
                <th>
                    Forms
                </th>

                @foreach (var stage in Model.selectedForm.rows[0].stages)
                {
                    <th>
                        @Html.DisplayFor(modelitem => stage.label)
                    </th>
                }
                <th>
                    TotalTime
                </th>


            </tr>

            @foreach (var row in Model.selectedForm.rows)
            {
                <tr>
                    <th>
                        @Html.DisplayFor(modelItem => row.label)
                    </th>

                    <td>
                        @Html.DisplayFor(modelItem => row.formCount)
                    </td>


                    @foreach (var stage in row.stages)
                    {

                        <td>
                            @Html.DisplayFor(modelitem => stage.timespan.TotalHours)
                        </td>
                    }
                    <td>
                        @Html.DisplayFor(modelitem => row.totalTimespan.TotalHours)
                    </td>

                </tr>

            }

        </table>
    }

</div>

这些过滤器通过一个按钮提交，并根据选择列表的值更改数据的行数和列数(以及每列和每行中的数据)。

根据过滤器，我可以有 2 行到 50 行，除了我的 formOptions 之一，通常会有一个标签和一个数据列(这将转化为Google 图表中的单个条形图)。

我已经拥有了为每个过滤器正确进入表格的任何图表所需的所有数据 - 我的问题是如何根据这些数据实际构建 Google 图表，根据所选的过滤器以与我的表格生成方式类似的方式更改显示的图表？

我的目的是在一个 View 中显示表格中的原始数据(我可以访问以验证图表中显示的数据是否正确)，然后在 Google 图表而不是表格中显示另一个 View 已创建。

Answer 1

如果只是想从html表格中抓取数据

使用每个单元格中的文本构建一个数组

然后使用 arrayToDataTable 方法创建 google DataTable

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart'],
  callback: drawChart
});

function drawChart() {
  var tableRows = [];
  var results = document.getElementById('Displaytable');
  Array.prototype.forEach.call(results.rows, function(row) {
    var tableColumns = [];
    Array.prototype.forEach.call(row.cells, function(cell) {
      var cellText = cell.textContent || cell.innerText;
      switch (cell.cellIndex) {
        case 0:
          tableColumns.push(cellText.trim());
          break;

        default:
          switch (row.rowIndex) {
            case 0:
              tableColumns.push(cellText.trim());
              break;

            default:
              tableColumns.push(parseFloat(cellText));
          }
      }
    });
    tableRows.push(tableColumns);
  });

  var data = google.visualization.arrayToDataTable(tableRows);
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

<table id="Displaytable">
  <tr>
    <th></th>
    <th>
      Forms
    </th>
    <th>
      A
    </th>
    <th>
      B
    </th>
    <th>
      C
    </th>
    <th>
      TotalTime
    </th>
  </tr>
  <tr>
    <th>
      Row 1
    </th>
    <td>
      1
    </td>
    <td>
      1
    </td>
    <td>
      1
    </td>
    <td>
      1
    </td>
    <td>
      3
    </td>
  </tr>
  <tr>
    <th>
      Row 2
    </th>
    <td>
      2
    </td>
    <td>
      2
    </td>
    <td>
      2
    </td>
    <td>
      2
    </td>
    <td>
      6
    </td>
  </tr>
  <tr>
    <th>
      Row 3
    </th>
    <td>
      3
    </td>
    <td>
      3
    </td>
    <td>
      3
    </td>
    <td>
      3
    </td>
    <td>
      9
    </td>
  </tr>
</table>