jquery – 通过ajax调用加载谷歌图表

我点击链接后试图调用谷歌图表.这就是我的功能：

function getGraphData(id) {

    var ajax_url = '<?=URL?>ajaxlibrary/get-graph-data';

    $.ajax({
        type: 'POST',url: ajax_url,dataType: 'html',data: ({
            id : id
      }),cache: false,success: function(data) {
            $('a').removeClass("selected");
            $('#link_'+id).addClass("selected");
            alert(data);

        },});
}

所以我在这里想要实现的是为不同的类似物加载不同的图形,所以假设我有政治图表,体育图表等.我不知道在哪里放置Google Api代码,因为它似乎是只是不工作……

编辑：
我编辑了这样的函数：

$.ajax({
         type: "POST",dataType: "html",data: {id: id},url: '<?=URL?>' + 'ajaxlibrary/get-charts',success: function(datas) {
            console.log(datas);
            var data = google.visualization.arrayToDataTable([
                    datas
            ]);

            var options = {
                title: 'My Daily Activities'
            };

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

但我从我的ajax PHP文件发送此数据流时遇到问题：

echo '[\'Task\',\'Hours per Day\'],[\'Work\',10],[\'shit\',50],[\'loop\',25],[\'poop\',15]';

响应不是有效的2D数组.如果我手动将值放在javascript文件中,它会起作用,因此问题出在响应中的某个位置.

解决方法

您可以使用以下代码加载带有Ajax调用的Google Charts.

$.ajax({
  url: 'https://www.google.com/jsapi?callback',cache: true,dataType: 'script',success: function(){
    google.load('visualization','1',{packages:['corechart'],'callback' : function()
      {

            $.ajax({
                 type: "POST",dataType: "json",data: {id: YOURIDHERE},success: function(jsondata) {
                    var data = google.visualization.arrayToDataTable(jsondata);

                    var options = {title: 'My Daily Activities'};

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

      }
    });
    return true;
  }
});

您可以使用Google Api加载任何其他图表类型,而不仅仅是核心图表.

原文地址：https://www.jb51.cc/jquery/177922.html