Google可视化-从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放在Google可视化脚本中，格式为？

    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表创建这种图表：图表URL。

​

我希望将MONTH COLUMN设置为hAxis，将TOTAL COLUMN设置为vAxis + Num.o.Val.Total (第二行)。

任何建议都很感激。

编辑：

不是百分之百地为它感到骄傲，但它确实有效：

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);


    }

活生生的例子

，我可以改进这个代码吗？

Answer 1

我认为其他选择也会奏效，这可能只是一个稍微短一些的方式。Gviz包含一个方便的arrayToDataTable函数，因此，如果您首先可以将html表转换为2d数组格式(第一个数组是头)，那么您就可以从它快速生成一个dataTable。

下面是一种使用上面包含的表的方法--根据表的结构，它可能需要一些小的修改。注意:您还需要将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值的数组。