通过ajax调用加载谷歌图表

我点击链接后试图调用谷歌图表。 这就是我的function：

function getGraphData(id) { var ajax_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代码，因为它似乎是只是不工作……

编辑：我编辑了这样的function：

  $.ajax({ type: "POST", dataType: "html", data: {id: id}, 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: '' + '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加载任何其他图表类型，而不仅仅是核心图表。