使用JSP加载JSON生成Google Chart时出现「Table has no columns」错误求助

你遇到的「Table has no columns」错误，主要来自两个关键问题，我来逐个拆解并给出修复方案：

问题1：AJAX请求的异步特性处理错误 #

$.ajax() 默认是异步请求，你直接把它返回的 jsonData 传给 google.visualization.DataTable() 是行不通的——因为这个 jsonData 并不是实际的JSON数据，而是jQuery的XHR请求对象，Google Charts无法从中解析出表格列信息。

问题2：read.jsp返回的不是纯JSON数据 #

你的read.jsp输出了完整的HTML结构（包含<html>、<body>标签），还在每行JSON后面追加了<br>标签，这导致返回的内容是混有HTML的非纯JSON格式，Google Charts无法正确解析出DataTable需要的列和行数据。

修复步骤 #

1. 修改前端JS代码，正确处理AJAX异步回调 #

把原来的同步写法改成异步回调，确保拿到实际的JSON数据后再初始化图表：

function drawChart() {
  // 用异步回调处理AJAX请求
  $.ajax({
    url: "read.jsp",
    dataType: "json",
    success: function(jsonData) {
      // 拿到真实的JSON数据后再创建DataTable
      var data = new google.visualization.DataTable(jsonData);
      // 初始化并绘制图表
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    },
    error: function(xhr, status, err) {
      console.error("加载数据失败：", err);
    }
  });
}

2. 修改read.jsp，返回纯JSON格式 #

去掉所有HTML结构，设置正确的响应头为application/json，并且输出纯JSON内容（不要加<br>或其他HTML标签）：

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8" import="java.io.*, java.net.*"%>
<%
String fileName = "/WEB-INF/json/test.json";
InputStream ins = application.getResourceAsStream(fileName);
try {
  if(ins == null) {
    response.setStatus(response.SC_NOT_FOUND);
  } else {
    // 指定UTF-8编码避免中文乱码
    BufferedReader br = new BufferedReader(new InputStreamReader(ins, "UTF-8"));
    String line;
    // 用print输出，不要自动换行或加<br>
    while((line = br.readLine())!= null) {
      out.print(line);
    }
    // 关闭流
    br.close();
    ins.close();
  }
} catch(IOException e) {
  response.setStatus(response.SC_INTERNAL_SERVER_ERROR);
  // 返回错误JSON，避免前端解析失败
  out.print("{\"error\":\"" + e.getMessage().replace("\"", "\\\"") + "\"}");
}
%>

3. 确保test.json符合Google Charts DataTable格式 #

你的JSON文件必须严格遵循Google Charts的DataTable JSON规范，示例格式如下：

{
  "cols": [
    {"id":"","label":"分类","pattern":"","type":"string"},
    {"id":"","label":"数值","pattern":"","type":"number"}
  ],
  "rows": [
    {"c":[{"v":"分类A"},{"v":40}]},
    {"c":[{"v":"分类B"},{"v":30}]},
    {"c":[{"v":"分类C"},{"v":30}]}
  ]
}

完成以上修改后，Google Charts就能正确解析JSON数据，生成带列和行的DataTable，「Table has no columns」的错误就会消失啦。

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