Google Visualization 获取一行中所有列的值

Question

我有一个表，我想在其中获取给定行中所有列的值。

我可以成功地使用它来获取单个列的值。

const valueRowCol = dataRef.getValue(0, 0);

是否有一个函数可以返回所有列的数据？

一如既往地感谢您的指导！

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

var globalTableRef = {};

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike', {
      v: 10000,
      f: '$10,000'
    }, true],
    ['Jim', {
      v: 8000,
      f: '$8,000'
    }, false],
    ['Alice', {
      v: 12500,
      f: '$12,500'
    }, true],
    ['Bob', {
      v: 7000,
      f: '$7,000'
    }, true]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  globalTableRef.dataRef = data;

  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

function getRowValue() {
  const {
    dataRef
  } = globalTableRef;

  const valueRowCol = dataRef.getValue(0, 0);
  console.log(valueRowCol);
  
  //I would like the full row with all it's columns  ???
  const valueRow = {}; 
  console.log(valueRow);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div><br/>
<button onclick="getRowValue()">getRowValue</button>

Answer 1

没有数据表method 将返回特定行的所有列值。

但是你可以通过多种方式处理。

1. 保存对您提供给数据表的数据的引用。
   然后使用该引用获取行值。
   请参阅以下工作片段...

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

var globalTableRef = {};
var globalData = [
  ['Mike', {
    v: 10000,
    f: '$10,000'
  }, true],
  ['Jim', {
    v: 8000,
    f: '$8,000'
  }, false],
  ['Alice', {
    v: 12500,
    f: '$12,500'
  }, true],
  ['Bob', {
    v: 7000,
    f: '$7,000'
  }, true]
];

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows(globalData);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  globalTableRef.dataRef = data;

  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

function getRowValue() {
  const {
    dataRef
  } = globalTableRef;

  const valueRowCol = dataRef.getValue(0, 0);
  console.log(valueRowCol);

  //I would like the full row with all it's columns  ???
  const valueRow = globalData[0];
  console.log(valueRow);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div><br/>
<button onclick="getRowValue()">getRowValue</button>

2. 使用循环从每一列手动填充行值
   请参阅以下工作片段...

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

var globalTableRef = {};
var globalData = [
  ['Mike', {
    v: 10000,
    f: '$10,000'
  }, true],
  ['Jim', {
    v: 8000,
    f: '$8,000'
  }, false],
  ['Alice', {
    v: 12500,
    f: '$12,500'
  }, true],
  ['Bob', {
    v: 7000,
    f: '$7,000'
  }, true]
];

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows(globalData);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  globalTableRef.dataRef = data;

  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

function getRowValue() {
  const {
    dataRef
  } = globalTableRef;

  const valueRowCol = dataRef.getValue(0, 0);
  console.log(valueRowCol);

  // there are several options as to how to build the row values
  
  // 1) raw values stored in an array
  const valueRow1 = [];
  for (var i = 0; i < dataRef.getNumberOfColumns(); i++) {
    valueRow1.push(dataRef.getValue(0, i));
  }
  console.log(1, valueRow1);

  // 2) values stored in an array as objects with properties for value (v:) and formatted value (f:)
  const valueRow2 = [];
  for (var i = 0; i < dataRef.getNumberOfColumns(); i++) {
    valueRow2.push({
      v: dataRef.getValue(0, i),
      f: dataRef.getFormattedValue(0, i)
    });
  }
  console.log(2, valueRow2);

  // 3) values stored in an object with column names as keys
  const valueRow3 = {};
  for (var i = 0; i < dataRef.getNumberOfColumns(); i++) {
    valueRow3[dataRef.getColumnLabel(i)] = dataRef.getValue(0, i);
  }
  console.log(3, valueRow3);

}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div><br/>
<button onclick="getRowValue()">getRowValue</button>