Question

所以我的情况如下：

我有一个页面可以创建一个谷歌图表，我将图表放在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？既然我猜其他图表从未创建过什么会发生什么呢？

提前致谢！

Answer 1

好吧，似乎问题是在另一页上加载javascript。过了一会儿，我发现了这个 Loading Google Visualisations via Ajax

并使用jquery加载而不是ajax get，现在它可以正常工作。

Answer 2

试试这个 -

google.charts.load（'current'，{'packages'：['corechart']}）; google.charts.setOnLoadCallback（drawChart）;

var jsonData = $ .ajax （{ 类型：“POST”， dataType：“json”， url：'stuff / chart.html'， async：false}）。responseText;

var data = new google.visualization.DataTable（jsonData）;

var options = { 标题：'TITLE HERE'，身高：550，宽度：1100， curveType：'function'，传说：{position：'bottom'} };

var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））;

chart.draw（数据，选项）;

json响应应该像 - https://developers.google.com/chart/interactive/docs/reference#dataparam

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

2 个答案: