Googleのチャートは、私はGoogleのチャート</p> <p>でチャートを描画しようとしている配列

Question

こんにちはみんなからのデータを追加、これは私のコードです：

 google.charts.load('current', {'packages':['bar']}); 
    google.charts.setOnLoadCallback(drawStuff); 


    function drawStuff() { 

    var data = new google.visualization.arrayToDataTable([ 


     ['', 'Total: '], 


     [info["name"] , info["qn"]], //first element 
     [info["name"] , info["qn"]], //second element 


    ]); 



    var options = { 


     legend: { position: 'none' }, 

     axes: { 

     }, 
     bar: { groupWidth: "80%" } 
    }; 

    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
    // Convert the Classic options to Material options. 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
    }; 

私の質問です：私はからデータを挿入するにはどうすればよいですチャートを配列に配置しますか？

PS：最初の要素は配列の最初の要素、2番目の要素は2番目の要素とします。

マイ配列：

var cont = 1; 
var rowtbl = document.getElementById("tabella").rows.length; 
rowtbl = rowtbl - 1; //number rows table 
while(cont <= rowtbl){ 
    var nomi; 
    var qnt; 
    nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML; 
    qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; 
    var info = {name: nomi, qn: qnt}; 
    cont = cont +1; 

} 

Answer 1

あなたはこれに似たオブジェクトの配列、...

var info = [ 
    { 
    name: "Test 1", 
    qn: 1 
    }, 
    { 
    name: "Test 2", 
    qn: 2 
    } 
]; 

を持っているならば、あなたは、このような...
第一要素としての要素にアクセスします - info[0]
第2要素 - info[1]

各要素の電子オブジェクトのキーは、次の2つの方法でアクセスすることができます...
info[0]["name"]
- または -
info[0].name

あなたはまた、ループ内のすべての行を追加するためにArray.forEachを使用することができます。上のベース -

はEDIT

google.charts.load('current', { 
 
    callback: function() { 
 

 
    var info = [ 
 
     { 
 
     name: "Test 1", 
 
     qn: 1 
 
     }, 
 
     { 
 
     name: "Test 2", 
 
     qn: 2 
 
     } 
 
    ]; 
 

 
    var data = new google.visualization.arrayToDataTable([ 
 
     ['', 'Total: '], 
 
     // add each element manually 
 
     [info[0]["name"] , info[0]["qn"]], //first element 
 
     [info[1]["name"] , info[1]["qn"]], //second element 
 
    ]); 
 

 
    // add each element via forEach loop 
 
    info.forEach(function(value, index, array){ 
 
     data.addRow([ 
 
     value.name, 
 
     value.qn 
 
     ]); 
 
    }) 
 

 
    var options = { 
 
     legend: { position: 'none' }, 
 
     bar: { groupWidth: "80%" } 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
    }, 
 
    packages: ['bar'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="top_x_div"></div>

...ただの行を追加するさまざまな方法を示すために、
、実施例以下、同じ行が二回追加された参照しますコメントのコード

の最後にdata.addRowを使用できますdata

google.charts.load('current', { 
 
     callback: function() { 
 
     var cont = 1; 
 
     var rowtbl = document.getElementById("tabella").rows.length; 
 
     rowtbl = rowtbl - 1; 
 

 
     // use object notation for column headings 
 
     var data = new google.visualization.arrayToDataTable([ 
 
      [{type: 'string', label: ''}, {type: 'number', label: 'Total: '}] 
 
     ]); 
 

 
     //number rows table 
 
     while(cont <= rowtbl){ 
 
      var nomi; 
 
      var qnt; 
 
      nomi = document.getElementById("tabella").rows[cont].cells[0].innerHTML; 
 
      qnt = document.getElementById("tabella").rows[cont].cells[1].innerHTML; 
 
      var info = { 
 
      name: nomi, 
 
      qn: qnt 
 
      }; 
 

 
      // add row to google data 
 
      data.addRow([ 
 
      info.name, 
 
      parseFloat(info.qn) 
 
      ]); 
 

 
      cont = cont +1; 
 
     } 
 

 
     var options = { 
 
      legend: { position: 'none' }, 
 
      bar: { groupWidth: "80%" } 
 
     }; 
 

 
     var chart = new google.charts.Bar(document.getElementById('top_x_div')); 
 
     chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
     }, 
 
     packages: ['bar'] 
 
    });

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<table id="tabella"> 
 
    <tr> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Test 1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test 2</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test 3</td> 
 
    <td>3</td> 
 
    </tr> 
 
</table> 
 

 
<div id="top_x_div"></div>