Question

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

＆＃13;

<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>

＆＃13;

这是url（ajax）中使用的Read.jsp：

＆＃13;

<%@ 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>

＆＃13;

结果我得到了这个错误＆＃34; 表没有列＆＃34; ： enter image description here

任何人都知道为什么请？谢谢你

Answer 1

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

请参阅以下摘录...

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());
}
%>

无法使用Json文件加载Google图表

1 个答案: