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

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

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>

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>

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

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

2 个答案: