为什么不显示谷歌图表？

Question

我有两个版本几乎相似的代码。一个有效，另一个无效。我想我在这方面遗漏了一些概念性细节。如果有人能指出错误，那就太好了。

以下代码不起作用。它只是加载一个白页。在控制台输出中，我可以从 print 语句中看到控件转到这两个函数。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script type="text/javascript">

            function procChart() {
            <% System.out.println("Inside procChart"); %>
                var ExpList = new Array();
                ExpList = request.getParameterValues("chkExps");
                ExpList.push(request.getParameter("expId"));
            <jsp:useBean id="dashboard" class="abc.def.server.DashboardBean" />
            <%String data2 = dashboard.getRecordData(Long.valueOf(request.getParameter("expId")), request.getParameter("field")); %>
                // Load the Visualization API and the piechart package.
                google.load('visualization', '1', {'packages': ['corechart']});
                // Set a callback to run when the Google Visualization API is loaded.
                google.setOnLoadCallback(drawChart);
            }

            function drawChart() {
            <% System.out.println("Inside drawChart");%>

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Employee Name');
                data.addColumn('number', 'salary');
                data.addColumn('number', 'age');
                data.addRows(6);
                data.setCell(0, 0, 'Mike');
                data.setCell(0, 1, 10);
                data.setCell(0, 2, 20);
                data.setCell(1, 0, 'Bob');
                data.setCell(1, 1, 20);
                data.setCell(1, 2, 25);
                data.setCell(2, 0, 'Alice');
                data.setCell(2, 1, 30);
                data.setCell(2, 2, 30);
                data.setCell(3, 0, 'Frank');
                data.setCell(3, 1, 40);
                data.setCell(3, 2, 35);
                data.setCell(4, 0, 'Floyd');
                data.setCell(4, 1, 50);
                data.setCell(4, 2, 20);
                data.setCell(5, 0, 'Fritz');
                data.setCell(5, 1, 60);
                data.setCell(5, 2, 40);
                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
            }
        </script>
    </head>
    <body>
        <!--Div that will hold the Line chart-->
        <div id="chart_div"></div>
    </body>
</html>

但下面的代码有效。这里我把 ProcChart 函数一起去掉了。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <!--Load the AJAX API-->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script type="text/javascript">

            google.load('visualization', '1', {'packages': ['corechart']});
            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Employee Name');
                data.addColumn('number', 'salary');
                data.addColumn('number', 'age');
                data.addRows(6);
                data.setCell(0, 0, 'Mike');
                data.setCell(0, 1, 10);
                data.setCell(0, 2, 20);
                data.setCell(1, 0, 'Bob');
                data.setCell(1, 1, 20);
                data.setCell(1, 2, 25);
                data.setCell(2, 0, 'Alice');
                data.setCell(2, 1, 30);
                data.setCell(2, 2, 30);
                data.setCell(3, 0, 'Frank');
                data.setCell(3, 1, 40);
                data.setCell(3, 2, 35);
                data.setCell(4, 0, 'Floyd');
                data.setCell(4, 1, 50);
                data.setCell(4, 2, 20);
                data.setCell(5, 0, 'Fritz');
                data.setCell(5, 1, 60);
                data.setCell(5, 2, 40);
                // Instantiate and draw our chart, passing in some options.
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, {width: 400, height: 240});
            }

        </script>
    </head>
    <body>
        <!--Div that will hold the Line chart-->
        <div id="chart_div"></div>
    </body>
</html>

编辑 - 更新

所以我尝试了这个东西，现在它按我想要的方式工作。

            <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
                pageEncoding="ISO-8859-1"%>
            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <!--Load the AJAX API-->
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript"
                src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

            <script type="text/javascript">       
                function procChart(){

                    <% System.out.println("Inside procChart"); %>

                    var ExpList = new Array();
                    ExpList = request.getParameterValues("chkExps");
                    ExpList.push(request.getParameter("expId"));
                    <jsp:useBean id="compare"
                        class="org.server.experiment.CompareResults" />

                        <%String data2 = compare.getRecordData(Long.valueOf(request.getParameter("expId")), request.getParameter("field")); %>
                    // Load the Visualization API and the piechart package.
                    <% System.out.println(data2); %>
                    }
                </script>

            <script type="text/javascript">

            google.load('visualization', '1', {'packages':['corechart']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);


                function drawChart() {

                    <% System.out.println("Inside drawChart"); %>
                    var data3 = <%= data2.toString() %>

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

                </script>



            </head>

            <body>

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

Answer 1

这里有几件事。首先，您没有任何调用procChart 的东西，因此该函数永远不会执行。其次，即使您确实调用了它，google 加载程序也会有一种奇怪的行为，会导致您出错；解决方法是使用回调的内联声明而不是调用google.setOnLoadCallback：

google.load('visualization', '1', {'packages':['corechart'], callback: drawChart});