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

响应不是有效的2D数组。如果我手动将值放在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加载任何其他图表类型，而不仅仅是核心图表。

通过ajax调用加载谷歌图表

1 个答案: