Fatal编程技术网
  • javascript/
  • Javascript 为什么谷歌图表不显示？

Javascript 为什么谷歌图表不显示？

javascript graph google-visualization

Javascript 为什么谷歌图表不显示？,javascript,graph,google-visualization,Javascript,Graph,Google Visualization,我有两个几乎相似的代码版本。一个有效，另一个无效。我想我在这方面遗漏了一些概念细节。如果有人能指出错误就好了 以下代码不起作用。它只加载一个白色页面。在控制台out中，我可以从print语句中看到控件同时指向这两个函数 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-/

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

以下代码不起作用。它只加载一个白色页面。在控制台out中，我可以从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（）{
var ExpList=新数组（）；
ExpList=request.getParameterValues（“chkExps”）；
ExpList.push（request.getParameter（“expId”）；
//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
}
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Employee Name'）；
data.addColumn（'number'，'salary'）；
data.addColumn（'number'，'age'）；
数据。添加行（6）；
setCell（0,0，'Mike'）；
数据集单元（0,1,10）；
数据集单元（0,2,20）；
setCell（1,0，'Bob'）；
数据集单元（1,1,20）；
数据集单元（1,2,25）；
setCell（2,0，'Alice'）；
数据集单元（2,1,30）；
数据集单元（2,2,30）；
setCell（3,0，'Frank'）；
数据集单元（3,1,40）；
数据集单元（3,2,35）；
setCell（4,0，'Floyd'）；
数据集单元（4,1,50）；
数据集单元（4,2,20）；
setCell（5,0，'Fritz'）；
数据集单元（5,1,60）；
数据集单元（5,2,40）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：400，高度：240}）；
}
但是下面的代码是有效的。在这里，我删除了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>


load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Employee Name'）；
data.addColumn（'number'，'salary'）；
data.addColumn（'number'，'age'）；
数据。添加行（6）；
setCell（0,0，'Mike'）；
数据集单元（0,1,10）；
数据集单元（0,2,20）；
setCell（1,0，'Bob'）；
数据集单元（1,1,20）；
数据集单元（1,2,25）；
setCell（2,0，'Alice'）；
数据集单元（2,1,30）；
数据集单元（2,2,30）；
setCell（3,0，'Frank'）；
数据集单元（3,1,40）；
数据集单元（3,2,35）；
setCell（4,0，'Floyd'）；
数据集单元（4,1,50）；
数据集单元（4,2,20）；
setCell（5,0，'Fritz'）；
数据集单元（5,1,60）；
数据集单元（5,2,40）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：400，高度：240}）；
}
编辑-更新

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

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


函数procChart（）{
var ExpList=新数组（）；
ExpList=request.getParameterValues（“chkExps”）；
ExpList.push（request.getParameter（“expId”）；
//加载可视化API和piechart包。
}
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
变量数据3=
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：400，高度：240}）；
}
这里有几件事。首先，您没有任何调用
procChart
，因此函数永远不会执行。第二，即使您确实调用了它，google loader也有一个奇怪的行为会导致您出错；修复方法是使用回调的内联声明，而不是调用
google.setOnLoadCallback
：

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