所以我的情况如下:
我有一个页面,创建一个谷歌图表,我把图表放在div作为一个例子,在这里https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
如果我使用iframe作为
<iframe id="mychart" name="mychart" src="stuff/chart.html"
frameborder="0" onLoad=autoResize("mychart");></iframe>
但是我想通过使用 AJAX 来获得它。
我试过跟踪
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
</script>
<script type="text/javascript">
$(document).ready(function() {
google.setOnLoadCallback(function() {
$.ajax({type: 'get', format: 'html', timeout: 9000, url: 'stuff/chart.html', success:
function (data) {
console.log(data);
$('#mychart').html(data);
var result = $(data).filter('#chart_div');
console.log(result.html());
$('#mychart').html(result.html());
}});
});
});
</script>
第一个日志显示了所需的html代码,但当记录包含谷歌图表的实际div时,我想显示的结果变量似乎是空的。
这是chart.html的大纲。我确实去掉了很多不相关的代码,但你应该明白我的意思。
<html>
<head>
<script type="text/javascript">
//Load the AJAX API
// Load the Visualization API
function drawChart() {
// Took out a lot of stuff
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, {
// Setting up parameters
});
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<!--Div that will hold a chart-->
<div id="chart_div"></div>
</body>
</html>
我检查了google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?
和其他一些主题。
那么有没有办法用这种方式加载谷歌图表,或者我应该只使用iframe?因为我猜会发生什么事,其他图表从来没有得到创建或什么?
提前感谢!
2条答案
按热度按时间deikduxw1#
好吧,看起来问题是在另一个页面上加载javascript。过了一段时间,我发现了这个Loading Google Visualisations via Ajax
并且使用了jquery load而不是 AJAX get,现在它按照我想要的那样工作。
oxalkeyp2#
试试这个-
而json的响应应该是这样的-https://developers.google.com/chart/interactive/docs/reference#dataparam