Google Visualization - получить данные из 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...

Цель состоит в том, чтобы создать такую ​​диаграмму: URL-адрес диаграммы из HTML-таблицы.

Я хочу установить 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);


    }

ЖИВОЙ ПРИМЕР ЗДЕСЬ

Как я могу улучшить этот код?

Answer 1

Я думаю, что другие опции тоже будут работать, это может быть немного более короткий путь.Gviz включает в себя удобную функцию arrayToDataTable , поэтому, если вы можете сначала перевести свою HTML-таблицу в формат 2d-массива (первый массив - заголовок), вы можете быстро сгенерировать таблицу данных gviz из этого.1004 * Вот способ сделать это, используя таблицу, которую вы включили выше - может потребоваться небольшая модификация в зависимости от структуры вашей таблицы.Примечание: Вам также нужно добавить 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 контейнера.
• title - это заголовок диаграммы.
• dataTable - это зубчатый массив, содержащий значения для каждой легенды.
• xaxis - это массив значений xaxis.