Question

www.un.org/Depts/DGACM/index_spanish.htm 能够照此等数据(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>

< with jQuery and put within the谷歌视觉化文字 in this form?

    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...

The goal is to create this kind of chart: CHART URL from html table.

我期待着建立<代码>。 MONTH COLUMN as hAxis and TOTAL COLUMN as vAxis +>Num.o.Val.Total (second line).

任何建议都受到高度赞赏。

http://www.un.org。

不是百分之百为之自豪,而是努力:

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


    }

最低生活水平

www.un.org/Depts/DGACM/index_spanish.htm 我能改进该守则的任何方式?

Answer 1

我认为,其他备选办法也将发挥作用,但这可能只是略微缩短。 Gviz 包括一个方便的 array ToDataTable功能,因此,如果你能够首先把html的表格输入2个阵列格式(第一阵列是头),那么你可以迅速生成一个gviz数据。表格。

这样做的方法是使用上述表格,视贵表格结构,可能需要稍加修改。注: 您还需要在html上增加一个四舍五入的表格,供您在新的格维茨桌上抽取。

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

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

//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]);
    iii
iii

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

iii

element is the container div.
title is the title of the chart.
dataTable is a jagged array containing values for each legend.
xaxis is an array of xaxis values.

友情链接