将动态 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 图表，根据选择的过滤器将以与我的表格生成方式类似的方式更改图表显示方式？

我的意图是在一个表中包含原始数据的视图（我可以访问以验证图表中显示的数据是否正确），然后另一个视图在 Google 图表中而不是表中显示所述数据已创建。

Answer 1

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

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

然后使用arrayToDataTable 方法创建google DataTable

请参阅以下工作 sn-p...

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>

Answer 2

首先，非常感谢 WhiteHat 的以下回答。我意识到这个问题就我需要做的事情而言可能有点太具体了。我最终找到了适合我需求的解决方案。我将在下面发布代码，以防有人出现并想看看我是如何解决这个问题的。

 <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn("string", "Category");


            @foreach (var stage in Model.selectedForm.rows[0].stages)
        {
            @Html.Raw("data.addColumn('number', '" + stage.label + "');")
        }


            @foreach (var row in Model.selectedForm.rows)
        {
            @Html.Raw("data.addRow(['" + row.label + "'") //The first part of our row is the label - each subsequent stage will be filled in at each iteration below

            foreach (var stage in row.stages) //For each stage in the row being created...
            {

                @Html.Raw(", " + stage.timespan.TotalHours) //...Continue the HTML builder adding additional timespans to eventually...
            }

            @Html.Raw("]);\n\n") //...close it here
        }

            var options = {
                titlePosition: 'none',
                width: 1200,
                height: 400,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '75%' },
                isStacked: true
            }

            var chart = new google.visualization.BarChart(document.getElementById('Chart'));
            chart.draw(data, options);
        }

    </script>

这既可以创建动态图表，也可以让不同的表单显示不同数量的列。