Question

我用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=""/>

Answer 1

试试这个：

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);
}

Answer 2

您需要确保在调用任何API组件时加载Visualization 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});

如何用ajax调用加载谷歌图表？

2 个答案: