Question

我编写了一个代码来从服务器调用数据，并使用Google Charts以图表的形式显示数据。我面临的问题是，在我点击刷新按钮后图表会填充，但是第一次显示图表结构但数据不可见。

我正在使用以下代码统一 //警报（ “这里”）;

                    //google.load("visualization", "1", {packages:["corechart"]} );
                    //google.setOnLoadCallback(drawChart); 

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

            var queryObject="";
            var queryObjectLen="";

            var queryObject1="";
            var queryObjectLen1="";
            $.ajax({
               type : 'POST',
               url : 'chart.jsp',
               dataType:'json',


               //async : false

            success : function(data) {

                queryObject = eval('(' + JSON.stringify(data) + ')');
                queryObjectLen = queryObject.empdetails.length;
               // document.getElementById("demo").innerHTML = queryObject.empdetails[1].CI + " " + queryObject.empdetails[1].TR;


                //System.out.println(+queryObjectLen);
                console.log(+ queryObject); 
                console.log('lenth :' +queryObjectLen);
                alert('success')
            },
                error : function(xhr, type) {
                alert('server error occured')
            }
        }); 


            function drawChart() {

       var data = new google.visualization.DataTable();

            data.addColumn('string', 'CI');
            data.addColumn('number', 'Tickets Raised');
            for(var i=0;i<queryObjectLen;i++)
            {

                var name = queryObject.empdetails[i].CI;
                var NOR = queryObject.empdetails[i].TR;
                data.addRows([
                    [name,parseInt(NOR)]
                ]);
            }
            var options = {
                title: 'Number Of Unity Tickets in a week',
                'width' : 500,
                'height' : 300
            };

var chart = new google.visualization.BarChart（document.getElementById（'chart_div'））;

chart.draw（数据，选项）;

    </script>
    </head>
    <body>
          <div id="chart_div" ></div>
           <div class = "center" id="chart_div1" ></div>
           <div class = "right" id="chart_div2" ></div>
          <p id="demo"></p>
     </body>
    </html>

Answer 1

您是否包含外部Google Charts javascript库？

如果是这样，在第一次加载之前执行ajax请求之前可能没有加载脚本，则后续刷新将起作用，因为此脚本已经被缓存。

要解决此问题，您应首先使用javascript加载Google Charts库，并在加载后执行ajax调用。

看起来你已经在使用jQuery，你可以使用jQuery.getScript()：

$.getScript("http://www.google.com/path_to_the_charts_script.js", function(){
    //put your ajax call in here
});

刷新浏览器后，Google图表会显示数据

1 个答案: