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 Visualization脚本？

    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表格转换为二维数组格式（第一个数组是标题），则可以从中快速生成一个gviz dataTable。

以下是使用上面包含的表格执行此操作的方法 - 根据您的表格结构，可能需要进行少量修改。注意：您还需要在html中添加div'table_div'，以便绘制新的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。
title是图表的标题。
dataTable是一个锯齿状数组，包含每个图例的值。
xaxis是一个xaxis值数组。

Google Visualization - 从html表中获取数据

2 个答案: