通过jquery ajax调用时，谷歌图表未显示 [英] google charts not showing when called through jquery ajax
本文介绍了通过jquery ajax调用时，谷歌图表未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用Google图表来显示图表.当我通过Alert选项检查数据是否被推入列表时，我的json数据即将到来，但总体该图表无法显示.
I am trying to use google chart to show the chart.My json data is coming when I am checking through the alert option to check the data are pushed into list but overall the chart is not able to display.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 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});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
推荐答案
以便直接从json创建数据表，
json必须采用特定格式，在此处找到 ...
in order to create the data table directly from json,
the json must be in a specific format, found here...
否则，可以手动加载数据，
参见以下代码段...
otherwise, the data can be loaded manually,
see following snippet...
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});
});
});
这篇关于通过jquery ajax调用时，谷歌图表未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
