谷歌可視化 - 擺脫HTML表中的數據

Question

是否有可能獲取這樣的（HTML表）中的數據：

<table border="0"> 

    <thead> 
    <tr> 
      <th scope="row" class="n-1">Month</th> 
      <th class="n-2">N.o.L.</th> 
      <th class="n-3">Val.</th> 
      <th class="n-4">Total</th> 
      <th class="n-5">Num.o.Val.Total</th> 
     </tr> 
</thead> 
    <tbody> 
    <tr> 
      <td class="n-1">1</td> 
      <td class="n-2">125</td> 
      <td class="n-3">0</td> 
      <td scope="col" class="n-4">125</td> 
      <td class="n-5">0</td> 
     </tr> 
    <tr> 
      <td class="n-1">2</td> 
      <td class="n-2">125</td> 
      <td class="n-3">48.75</td> 
      <td scope="col" class="n-4">173.75</td> 
      <td class="n-5">5</td> 
     </tr> 
    <tr> 
      <td class="n-1">3</td> 
      <td class="n-2">125</td> 
      <td class="n-3">97.5</td> 
      <td scope="col" class="n-4">222.5</td> 
      <td class="n-5">10</td> 
     </tr> 
    </tbody> 
</table> 

與jQuery和以這種格式把谷歌可視化腳本里面？

data.addRows(13); // number of rows + 1 


    data.setValue(0, 0, '1'); // month = 1 (index, 0, $month) 
    data.setValue(0, 1, 125); // for Month =1, Total = 123 (index, 1, $total) 
    data.setValue(0, 2, 0); // for Month = 1, Num.o.Val.Total = 5 (index, 2, $Num.o.Val.Total) 
    etc... 

---

的目標是創造這種圖表：從HTML表格 CHART URL。

我期待設置MONTH COLUMN爲hAxis和TOTAL COLUMN爲vAxis + Num.o.Val.Total（第二行）。

任何建議非常感謝。

---

編輯：

沒有100％地爲它驕傲，但確實工作：

var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Month'); 
    data.addColumn('number', 'Total'); 
    data.addColumn('number', 'Num.o.Val.Total'); 

    var NumOfRows = $('table tbody tr').length; // number of rows 
    data.addRows(NumOfRows); 


    for (i = 0; i < NumOfRows; ++i) { 

     var CurrentPlusOne = i+1; 
     var Month = $('table tbody tr:nth-child(' + CurrentPlusOne + ')').children(':first-child').html(); 
     var Total = parseInt($('table tbody tr:nth-child(' + CurrentPlusOne + ')').children().eq(3).html()); 
     var TotalNum = parseInt($('table tbody tr:nth-child(' + CurrentPlusOne + ')').children().eq(4).html()); 

     data.setValue(i, 0, Month); 
     data.setValue(i, 1, Total); 
     data.setValue(i, 2, TotalNum); 


    } 

LIVE EXAMPLE HERE

無論如何，我可以改進的代碼？

Answer 1

我認爲其他選項也可以工作，這可能只是一個稍短的方法。 Gviz包含了一個方便的arrayToDataTable函數，所以，如果你可以首先將你的html表格轉換成2d數組格式（第一個數組是頭部），那麼你可以從那裏快速生成一個gviz數據表。

這是使用上面包含的表的方法 - 根據您的表結構，可能需要稍微修改。注意：您還需要一個div「table_div」添加到您的HTML爲您的新gviz表中可以得出

function drawVisualization() { 
    var values = []; // to hold our values for data table 
    // get our values 
    $('table tr').each(function(i, v){ 
    values[i] = []; 
    // select either th or td, doesn't matter 
    $(this).children('th,td').each(function(ii, vv){ 
     values[i][ii] = $(this).html(); 
    }); 
    }); 
    // convert 2d array to dataTable and draw 
    var data = google.visualization.arrayToDataTable(values); 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
    table.draw(data); 
} 
.... 
.... 
<!--somewhere in your html--> 
<div id='table_div'></div> 

希望有所幫助。

Answer 2

要動態綁定圖表，嘗試將數據從html表格存儲到數組，然後使用以下方法繪製圖表。

function DrawChart(element, title, dataTable, xAxis) { 
// Create our data table. 
var data = new google.visualization.DataTable(); 

var raw_data = dataTable; 

data.addColumn('string', 'Month'); 

//Insert the first value of each array to represent the year. 
for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]); 
} 

data.addRows(xAxis.length); 

//Insert xAxis values into the data table. 
for (var j = 0; j < xAxis.length; ++j) { 
    data.setValue(j, 0, xAxis[j]); 
} 

//Insert input values into the data table. 
for (var i = 0; i < raw_data.length; ++i) { 
    for (var j = 1; j < raw_data[i].length; ++j) { 
     data.setValue(j - 1, i + 1, raw_data[i][j]); 
    } 
} 

//Draw the chart. 
var div = $('#' + element); 
new google.visualization.LineChart(div.get(0)).draw(data, { 
    title: title, 
    width: div.width() 
}); 

}

• 元素是div容器。
• 標題是圖表的標題。
• dataTable是一個包含每個圖例值的鋸齒狀數組。
• xaxis是一個xaxis值的數組。