google.setOnLoadCallBack不起作用

Question

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
        $(document).ready(function(){
            var receivedData = [];
            var category = [];
            var value = [];
            var i;
            var chart;
            var data;
            var options;
          $("#firstDate,#secondDate").datepicker({
              maxDate: 0 
              });
         $("#chartButton").click(function(){         
            var processed_json = new Array();
            var chart_data;
            var x = new Object();     
            x.fromDate = $('#firstDate').val();
            x.toDate = $('#secondDate').val();
            var chart = JSON.stringify(x);      
                $.ajax({
                    url: 'http://localhost:4862/BillTracker/ControllerServlet/chart',
                    method: 'POST',
                    data: chart,
                    dataType: 'json',
                    success: function(data){
                        $.each(data.jsonArray, function(index) {
                            $.each(data.jsonArray[index], function(key, value) {
                                var point = [];
                                    point.push(value);
                                    receivedData.push(point);
                                })

                    }); //end of array
                        alert(receivedData);
                    alert(receivedData.length);
                  google.setOnLoadCallback(drawChart);
                function drawchart(){
                    alert("load");
                    for(i=0;i<receivedData.length;i+=2){                
                        var a = receivedData[i];
                        var b = receivedData[i+1];
                        value.push(b);
                        category.push(a);
                    }
                    alert(category[0]);
                    alert(value[0]);
                    var options = {
                            title: 'Expense View',
                            hAxis: {title: 'Category', titleTextStyle: {color: 'red'}},
                            vAxis: {title: 'Expense', titleTextStyle: {color: 'red'}}
                          };
                    data = new google.visualization.DataTable();
                    data.addColumn('string', 'category');
                    data.addColumn('number', 'value');
                for(i = 0; i < category.length; i++){
                   data.addRow([category[i], value[i]]);
                }
               new google.visualization.BarChart(document.getElementById('chart_div')).
                draw(data, options);
                }
               } //end of success func
            }); // end of ajax call
        }); //end of click function
      });  

    </script>
  </head>
  <body>
<!--Div that will hold the pie chart-->
    <div data-role="fieldcontain">
        <label for="firstDate">Date</label>
        <input type="text" name="firstDate" id="firstDate" placeholder="Date..." data-clear-btn="true">
        </div>
        <div data-role="fieldcontain">
        <label for="secondDate">Date</label>
        <input type="text" name="secondDate" id="secondDate" placeholder="Date..." data-clear-btn="true">
        </div>
        <div>
        <input type="button" value="Save" id="chartButton" data-icon="check" data-iconpos="right" ></div>
    <div id="container" style="width:400; height:300"></div>
  </body>
</html>

我是Google可视化的新手。 我通过ajax调用从数据库中获得了一些价值。 问题是google.setOnLoadCallBack没有调用。 我认为功能应该放在不同的位置，我也可能错了。

任何人的帮助。

Answer 1

尝试四处移动google.setOnLoadCallback(drawChart); ，就像您自己说的那样。
我建议将其放在google.load("visualization", "1", {packages:["corechart"]}); 。

google.setOnLoadCallBack不起作用

问题描述

1 个解决方案

解决方案1
0 2015-05-12 11:58:29

google.setOnLoadCallBack不起作用

问题描述

1 个解决方案

解决方案1 0 2015-05-12 11:58:29

解决方案1
0 2015-05-12 11:58:29