將動態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> 

這些過濾器與按鈕提交併改變數據的行和列的根據selectlists的值的數目（以及在每個列和行的數據）。

根據過濾器的不同，我可以從2行到50的任意位置，除了我的​​之一，通常會有一個標籤和一列數據（這將在Google Charts中翻譯爲單個欄）。

我已經擁有了所有的數據，我需要爲每個過濾器正確地輸入表格 - 我的問題是如何根據這些數據實際建立一個Google圖表，根據選定的過濾器將會改變這些圖表與我的表格如何生成相似？

我的意圖是在一張表中使用原始數據（我可以訪問以驗證圖表中顯示的數據是正確的），然後在Google圖表中顯示所述數據的另一個視圖，而不是我創建的表。

Answer 1

首先，非常感謝下面的答案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> 

這既可以用作動態圖表創建，也可以允許不同的窗體顯示不同數量的列。

Answer 2

，如果你只是想從HTML表

獲取數據從每個細胞

建立使用文本的數組，然後使用arrayToDataTable方法

看到下面的工作片斷谷歌的數據表創建。 ..

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>