使用Google Chart从JSON文件生成表格失败，求排查代码问题

嘿，我懂你现在的懊恼——之前靠复制粘贴用Google Charts搞图表还能搞定，现在生成表格卡壳确实让人头大！先别急，你的代码片段看起来没写完（最后是<script type="text/j...），不过我可以帮你梳理下用Google Charts从JSON生成表格时最容易踩的几个坑，你可以对照着检查：

1. Google Charts 核心加载流程没走对 #

Google Charts有严格的加载顺序要求，必须先调用google.charts.load()并在回调里执行绘制逻辑，很多人会跳过这一步直接写代码，导致API还没准备好就运行，自然出问题。正确的基础结构应该是：

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

function drawTable() {
  // 这里写获取JSON和绘制表格的逻辑
}

2. JSON数据没转换成Google Charts能识别的格式 #

Google Charts的表格需要DataTable格式，普通JSON结构是无法直接被识别的。举个例子，如果你的原始JSON是：

[
  {"name": "Alice", "age": 25},
  {"name": "Bob", "age": 30}
]

你需要手动把它转成DataTable：

$.getJSON('your-data.json', function(data) {
  var tableData = new google.visualization.DataTable();
  // 先定义列
  tableData.addColumn('string', 'Name');
  tableData.addColumn('number', 'Age');
  // 再添加行数据
  data.forEach(function(row) {
    tableData.addRow([row.name, row.age]);
  });
  // 最后绑定容器并绘制
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(tableData);
});

要是直接把原始JSON丢给draw()方法，肯定会失败。

3. 缺少表格渲染的容器元素 #

你得在HTML里提前加一个用来放表格的<div>，比如：

<div id="table_div"></div>

很多人会忘了加这个，代码找不到渲染目标，自然看不到表格。

4. jQuery加载顺序或版本问题 #

你引用的是jQuery 1.10.2，虽然Google Charts对jQuery版本要求不高，但要确保jQuery在你的自定义脚本之前加载，不然$.getJSON会直接报错。另外这个版本确实偏老了，要是遇到兼容性问题，可以试试更新到3.x系列的稳定版（注意不要用太新的版本导致和旧代码冲突）。

5. 跨域限制（如果JSON文件不在同一域名下） #

要是你的JSON文件存放在其他域名的服务器上，直接用$.getJSON会触发浏览器的跨域限制。这时候要么在服务器端配置CORS，要么把JSON文件移到和页面同一域名下，或者用JSONP（如果服务器支持的话）。

建议你把没写完的代码补全，对照上面的点逐一排查，应该能找到问题所在～

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