jquery – Google Visualization – 从html表中获取数据

2023年5月10日 211次阅读

是否可以获取这样的数据(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

我可以用任何方式改进代码吗？

最佳答案 我认为其他选项也会起作用,这可能只是稍微短一些. 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>

希望有所帮助.

点赞