Javascript 如何使用ajax调用加载google图表？

我写了谷歌甜甜圈图表与ajax加载，但我不能得到输出，请帮助我。。。 我的脚本代码如下

google.load("visualization", "1", {packages:["corechart"]});
$.ajax({
    url: "ProjectCategoryChart",
    dataType:'JSON',
    cache: false,
    success: function(data) {
         alert("a"+  data.aCount );
         $("#acount").val(data.aCount);
         $("#bcount").val(data.bCount);
         $("#ccount").val(data.cCount);
         $("#dcount").val(data.dCount);
         $("#nocount").val(data.noCount);
         google.setOnLoadCallback(drawChart);
     }
    });


  function drawChart() {
      alert("a value"+ parseInt($("#acount").val()));
    var data = google.visualization.arrayToDataTable([
      ['Categorized', 'No.of Projects'],
      ['A',     parseInt($("#acount").val())],
      ['B',     parseInt($("#bcount").val())],
      ['C',  parseInt($("#ccount").val())],
      ['D', parseInt($("#dcount").val())],
      ['Not Categorized',    parseInt($("#nocount").val())]
    ]);

    var options = {
      title: 'Project Categorization',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }

我的html代码是

<div id="donutchart" style="width: 600px; height: 350px;"></div>
         <input type="hidden" id="acount" value=""/>
         <input type="hidden" id="bcount" value=""/>
         <input type="hidden" id="ccount" value=""/>
         <input type="hidden" id="dcount" value=""/>
         <input type="hidden" id="nocount" value=""/>

试试这个：

google.load("visualization", "1", {packages:["corechart"]});
$.ajax({
    url: "ProjectCategoryChart",
    dataType:'JSON',
    cache: false,
    success: function(data) {
          alert("a"+  data.aCount );
          var dataValues = {
              aCount : data.aCount,
              bCount : data.bCount,
              cCount : data.cCount,
              dCount : data.dCount,
              nCount : data.nCount
          };
          drawChart(dataValues);
     }
});

function drawChart(data) {
    var data = google.visualization.arrayToDataTable([
        ['Categorized', 'No.of Projects'],
        ['A', data.aCount],
        ['B', data.bCount],
        ['C', data.cCount],
        ['D', data.dCount],
        ['Not Categorized', data.nCount]
    ]);
    var options = {
      title: 'Project Categorization',
      pieHole: 0.4,
    };
    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
}

---

您需要确保在调用任何API组件时加载可视化API，这需要等待加载程序的回调。实现这一点的简单方法是在加载API后启动AJAX调用：

function drawChart () {
    $.ajax({
        url: 'ProjectCategoryChart',
        dataType: 'JSON',
        cache: false,
        success: function (data) {
            // you can remove these if you don't need them for something else
            alert('a'+ data.aCount);
            $('#acount').val(data.aCount);
            $('#bcount').val(data.bCount);
            $('#ccount').val(data.cCount);
            $('#dcount').val(data.dCount);
            $('#nocount').val(data.noCount);

            var dataTable = google.visualization.arrayToDataTable([
                ['Categorized', 'No.of Projects'],
                ['A', data.aCount],
                ['B', data.bCount],
                ['C', data.cCount],
                ['D', data.dCount],
                ['Not Categorized', data.noCount]
            ]);

            var options = {
                title: 'Project Categorization',
                pieHole: 0.4,
            };

            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
            chart.draw(dataTable, options);
        }
    });
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

---

我改变了google.setOnLoadCallback（drawChart）；到drawchart（）但是我没有收到任何东西我的警报（“a值”+parseInt（$（“#acount”）.val（））；值为NAN。我在控制台中发现错误，如Uncaught TypeError:Object#没有“arrayToDataTable”方法谢谢，它解决了我的问题。但在加载图表时我仍然面临问题。我的要求是，我有一个带有4个链接（列表项）的菜单栏，当我单击链接时，它应该会打开页面（此页面包含图形）。当从一个页面移动到另一个页面时，它仍会占用大量时间，有时它不会显示。重新加载页面后，它会显示graphIt，听起来您的数据源存在性能问题；一旦浏览器接收到数据，渲染图表的时间可以忽略不计。