谷歌图表添加数组中的数据

Google Chart add data from array

本文关键字：数据 数组 添加 谷歌      更新时间：2023-09-26

大家好，我正在尝试用谷歌图表绘制图表

这是我的代码：

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

如果您有一个对象数组，类似于。。。

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>

编辑——基于注释中的代码

可以在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>

相关文章：