如何使用ajax和jquery加载google图表？_Jquery_Ajax_Google Visualization

如何使用ajax和jquery加载google图表？

jquery ajax google-visualization

如何使用ajax和jquery加载google图表？,jquery,ajax,google-visualization,Jquery,Ajax,Google Visualization,因此，我的情况如下：我有一个页面，创建了一个谷歌图表，在这里我将图表放在div中作为示例如果我使用iframe作为 <iframe id="mychart" name="mychart" src="stuff/chart.html" frameborder="0" onLoad=autoResize("mychart");></iframe> 但是我想通过使用ajax来实现它我试着跟着你 <script type="text/javascript"&

因此，我的情况如下：

我有一个页面，创建了一个谷歌图表，在这里我将图表放在div中作为示例

如果我使用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>


load（'visualization'，'1'，{'packages'：['corechart']}）；
$（文档）.ready（函数（）{
setOnLoadCallback（函数（）{
$.ajax（{type:'get'，format:'html'，timeout:9000，url:'stuff/chart.html'，success:
功能（数据）{
控制台日志（数据）；
$（'#mychart'）.html（数据）；
var result=$（数据）.filter（'#chart_div'）；
log（result.html（））；
$（'#mychart'）.html（result.html（））；
}});
});
});

其中第一个日志显示所需的html代码，但在记录包含google图表的实际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>


//加载AJAX API
//加载可视化API
函数绘图图（）{
//拿出了很多东西
var data=新的google.visualization.DataTable（jsonData）；
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（数据、{
//设置参数
});
}
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；

我查过了

以及其他一些话题

那么，有没有一种方法可以用这种方式加载谷歌图表，或者我应该只使用iframe？因为我猜另一张图表没有被创建或者什么的发生了什么

提前谢谢

好的，问题似乎是在另一个页面上加载javascript。过了一会儿我发现了这个

使用jquery load而不是ajax get，现在它可以按照我的要求工作。

试试这个-

google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
var jsonData=$.ajax({
类型：“POST”，
数据类型：“json”，
url:'stuff/chart.html'，
异步：false
}).responseText；
var data=新的google.visualization.DataTable（jsonData）；
变量选项={
标题：'此处标题'，
身高：550，
宽度：1100，
curveType:'函数'，
图例：{位置：'bottom'}
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；

json响应应该像-

chart.html包含什么？添加了chart.htmlOk的草稿-通过AJAX加载图表html的目标是什么？这仅仅是为了获取数据，还是HTML中会显示其他差异？我想在mypage.HTML中显示另一个页面上生成的图表作为示例，它将包含另一个数据和一组这些图形。通过ajax而不是html加载图形。主要原因是我使用twitterbootsrap，iframes不能在移动设备上扩展，所以我想如果我使用ajax，我可以应用不同的引导css样式，并根据使用的设备进行扩展。