如何为Google Visualization DataTable动态生成适配列数的行数据

你可以通过数组遍历+类型转换的方式，动态处理任意数量的数值列，核心是对每一行数据做针对性转换：

1. 先修正表头提取的小问题：array_json.shift(1)是错误写法，JS的shift()方法不需要参数，直接调用就能移除并返回数组第一个元素（即表头行）。
2. 对剩余的行数据，使用map遍历每一行，第一列保留原始字符串，从第二列开始逐个转换为Number类型，最后把处理好的行批量添加到DataTable。

完整代码示例 #

// 示例数据源（可替换为用户实际的array_json）
const array_json = [["date","CA","SF","IL"],["May-2024",100,200,400],["Jun-2024",200,300,500]];

// 提取表头行
const dynamic_col_names = array_json.shift();
const dtbl = new google.visualization.DataTable();

// 动态添加列
for (let i = 0; i < dynamic_col_names.length; i++) {
  const colInfo = dynamic_col_names[i];
  if (i === 0) {
    dtbl.addColumn({ label: colInfo, id: colInfo, type: 'string' });
  } else {
    dtbl.addColumn({ label: colInfo, id: colInfo, type: 'number' });
  }
}

// 动态处理行数据：转换数值列类型
const processedRows = array_json.map(row => {
  const rowData = [row[0]]; // 第一列保持字符串
  // 遍历剩余列，转为Number
  for (let j = 1; j < row.length; j++) {
    rowData.push(Number(row[j]));
  }
  return rowData;
});

// 批量添加行到DataTable
dtbl.addRows(processedRows);

说明 #

• 不管用户的数值列有多少个（2个、3个或更多），这段代码都能自动适配，不需要修改逻辑。
• 使用map和原生循环处理数据，性能高效，且代码简洁易维护。

内容的提问来源于stack exchange，提问作者Curious_learner