通过jquery ajax调用时，谷歌图表不显示

我正在尝试使用谷歌图表来显示图表。当我通过警报选项检查以检查数据是否被推入列表时，我的json数据即将到来，但总体而言图表无法显示。

      // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "http://localhost:8080/FRA-UI/api/report19graph/all", dataType: "json", async: false }).responseText; alert(JSON.stringify(jsonData)); // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); }     
   

Answer 1

为了直接从json创建数据表，
json必须是特定的格式， 在这里找到 …

否则，数据可以手动加载，
请参阅以下片段…

 google.charts.load('current', { packages: ['corechart'] }).then(function () { $.ajax({ url: 'http://localhost:8080/FRA-UI/api/report19graph/all', dataType: 'json' }).done(function (jsonData) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Range'); data.addColumn('number', 'Value'); $.each(jsonData, function (index, row) { data.addRow([ row.rangeLab, row.rangeVal ]); }); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240}); }); });