无法使用带有 JSP 的 Json 文件加载 Google 图表答案

【问题标题】：Can't Load Google Chart Using Json File with JSP无法使用带有 JSP 的 Json 文件加载 Google 图表
【发布时间】：2018-01-29 11:14:56
【问题描述】：

我正在使用 Google 图表 API 从 json 文件数据中加载饼图这是创建图表的位置（HTML 文件）：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    
    // Load the Visualization API and the piechart package.
    google.charts.load('current', {'packages':['corechart']});
      
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
      
    function drawChart() {
       
     var jsonData =   $.ajax({
                    url: "read.jsp",               
                    dataType: "json"                   
                  });
          
          
      // Create our data table out of JSON data loaded from server.
      var data = new  google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    } 
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" ></div>aa
  </body>
</html>

这里是 url (ajax) 中使用的 Read.jsp：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import="java.io.*, java.net.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JSP Reading Text File</title>
</head>
<body>
<%
String fileName = "/WEB-INF/json/test.json";
InputStream ins = application.getResourceAsStream(fileName);
try
{
    if(ins == null)
    {
        response.setStatus(response.SC_NOT_FOUND);
    }
    else
    {
        BufferedReader br = new BufferedReader((new InputStreamReader(ins)));
        String data;
        while((data= br.readLine())!= null)
        {
            out.println(data+"<br>");
        }
    }   
}
catch(IOException e)
{
out.println(e.getMessage());
}
%>
</body>
</html>

结果我得到这个错误 "Table has no columns" ： enter image description here

有人知道为什么吗？谢谢你

【问题讨论】：

是的，格式是这样的：{ "cols": [ {"id":"","label":"Topping","pattern":"","type":"string "}, {"id":"","label":"Slices","pattern":"","type":"number"} ], "rows": [ {"c":[{"v ":"蘑菇","f":null},{"v":3,"f":null}]}, {"c":[{"v":"洋葱","f":null} ,{"v":1,"f":null}]}, {"c":[{"v":"Olives","f":null},{"v":1,"f": null}]}, {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]}, {"c":[{ "v":"Pepperoni","f":null},{"v":2,"f":null}]} ] }

标签： json ajax jsp charts google-visualization

【解决方案1】：

默认情况下，$.ajax 是异步的，
需要等待done 回调...

看下面的sn-p...

function drawChart() {
  $.ajax({
    url: "read.jsp",
    dataType: "json"
  }).done(function (jsonData) {
    // Create our data table out of JSON data loaded from server.
    var data = new  google.visualization.DataTable(jsonData);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});
  });
}

编辑

另外，从 jsp 文件中删除所有 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
    {
        BufferedReader br = new BufferedReader((new InputStreamReader(ins)));
        String data;
        while((data= br.readLine())!= null)
        {
            out.println(data);
        }
    }
}
catch(IOException e)
{
out.println(e.getMessage());
}
%>

【讨论】：

我认为是因为 read.jsp 没有返回 JSON 字符串
\n\n<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\">\n<title>JSP Reading Text File</title>\n</head>\n<body>\n \n{ \r\n \"cols\": [ \r\n {\"id\":\"\",\"label\":\"Topping\",\"pattern\":\"\",\"type\":\"string\"}, \r\n {\"id\":\"\",\"label\":\"Slices\",\"pattern\":\"\",\"type\":\"number\"} \r\n ], \r\n \"rows\": [ \r\n {\"c\":[{\"v\":\"Mushrooms\",\"f\":null},{\"v\":3,\"f\":null}]}, \r\n
这是新的 jsonData 内容
它接缝 read.jsp 正在返回空洞 html 格式响应