javascript - Google Chart 从数组中添加数据

Question

大家好，我正在尝试使用 Google 图表绘制图表

这是我的代码:

      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:第一个元素应该是数组的第一个元素，第二个元素应该是第二个元素。

我的数组:

    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]
第二个元素 -- info[1]

关于每个元素的对象键，你可以通过两种方式访问​​...
信息[0]["名称"]
-- 或者 --
信息[0].name

您还可以使用 Array.forEach 将所有行添加到一个循环中。

请看下面的工作示例，相同的行被添加了两次，
只是为了展示添加行的不同方式...

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>

编辑——基于评论中的代码

您可以在 while 语句的末尾使用 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>