通过 ajax 调用加载谷歌图表

Question

点击链接后，我正在尝试调用谷歌图表。这是我的函数的样子：

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]';

响应不是有效的二维数组。如果我手动将值放入 javascript 文件中，它可以工作，所以问题出在响应中。

Answer 1

您可以使用以下代码通过 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},
                 url: '<?=URL?>' + 'ajaxlibrary/get-charts',
                 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 加载任何其他图表类型，而不仅仅是核心图表。