Javascript 将动态HTML表转换为google图表？

我有一个ASP.NET核心网站，它从模型中获取数据，并创建一个动态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>

@如果（Model.selectedForm.rows.Count>0）
{
形式
@foreach（Model.selectedForm.rows[0].stages中的var阶段）
{
@DisplayFor（modeleItem=>stage.label）
}
总时间
@foreach（Model.selectedForm.rows中的变量行）
{
@DisplayFor（modelItem=>row.label）
@DisplayFor（modelItem=>row.formCount）
@foreach（第行中的var阶段）
{
@DisplayFor（modelitem=>stage.timespan.TotalHours）
}
@DisplayFor（modelitem=>row.totalTimespan.TotalHours）
}
}

这些过滤器通过按钮提交，并根据SelectList的值更改数据的行数和列数（以及每列和每行中的数据）

根据过滤器的不同，我可以有2行到50行，除了我的

formOptions

中的一行之外，通常都会有一个标签和一列数据（这将在谷歌图表中转换为一个条形图）

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

---

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

如果您只想从html表中获取数据

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

然后使用

arrayToDataTable

方法创建google数据表

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']，
回调：绘图
});
函数绘图图（）{
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；
开关（cell.cellIndex）{
案例0：
tableColumns.push（cellText.trim（））；
打破
违约：
开关（row.rowIndex）{
案例0：
tableColumns.push（cellText.trim（））；
打破
违约：
push（parseFloat（cellText））；
}
}
});
tableRows.push（tableColumns）；
});
var data=google.visualization.arrayToDataTable（tableRows）；
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
图表绘制（数据）；
}

形式
A.
B
C
总时间
一排
1.
1.
1.
1.
3.
第2排
2.
2.
2.
2.
6.
第3排
3.
3.
3.
3.
9

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

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（“字符串”、“类别”）；
@foreach（Model.selectedForm.rows[0].stages中的var阶段）
{
@Html.Raw（“data.addColumn（'number'，'“+stage.label+”）；”）
}
@foreach（Model.selectedForm.rows中的变量行）
{
@Html.Raw（“data.addRow（['“+row.label+””）//我们行的第一部分是标签-每个后续阶段将在下面的每次迭代中填写
foreach（varstage in row.stages）//对于正在创建的行中的每个阶段。。。
{
@Html.Raw（“，”+stage.timespan.TotalHours）/…继续Html生成器添加额外的时间跨度以最终。。。
}
@Html.Raw（“]）；\n\n“/…在此处关闭它
}
变量选项={
标题位置：“无”，
宽度：1200，
身高：400，
图例：{位置：'top'，最大线：3}，
条：{groupWidth:'75%}，
伊斯塔克德：是的
}
var chart=new google.visualization.BarChart（document.getElementById（'chart'）；
图表绘制（dat）