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]

对于每个元素的对象键，你可以通过两种方式访问...
info[0]["name"]
- 或 -
info[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>

编辑 - 基于评论

的代码

您可以在data.addRow声明

的末尾使用while

注意对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>

Google Chart从阵列中添加数据

1 个答案: