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

Converting a dynamic HTML table to a google chart?

本文关键字：谷歌 转换 动态 HTML 表格      更新时间：2023-09-26

我有一个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，通常会有一个标签和一个数据列(这将在谷歌图表中转换成一个条形图)。

我已经有了所有的数据，我需要任何图表进入表正确的每个过滤器- 我的问题是如何实际建立一个基于此数据的谷歌图表，根据所选择的过滤器将改变图表以类似的方式显示我的表是如何生成的?

我在这里的意图是有一个视图的原始数据在一个表(我可以访问以验证在图表中显示的数据是正确的)，然后另一个视图显示在谷歌图表中说的数据，而不是我创建的表。

如果您只想从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>

首先，非常感谢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>

这个功能既可以创建动态图表，也允许不同的表单显示不同数量的列。

相关文章：