如何使用AJAX和jQuery加载谷歌的图表？图表、如何使用、加载、jQuery

2023-09-11 01:12:29 作者：夕阳接近黄昏

所以，我的情况如下：

我有一个创建一个谷歌的图表，我将图中的div作为一个例子，这里的https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

I have a page that creates a google chart where I place the graph in div as an example in here https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

这工作正常

<iframe id="mychart" name="mychart" src="stuff/chart.html" 
frameborder="0"  onLoad=autoResize("mychart");></iframe>

但我想通过使用Ajax来得到它。

but I would like to get it by using 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 code，但记录可能包含有谷歌图表的实际股利时，我想显示的结果变量似乎是空的。

Where the first log shows the html code as wanted but when logging the actual div that would contain the google chart I would like to show the result variable seems to be empty.

这里的概述chart.html。我也走了很多不相关的code关闭，但你应该明白了吧。

Here's outlined chart.html. I did take a lot of unrelated code off but you should get the idea.

<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与jQuery $（文件）。就绪（），是不是OK混？

和一些其他的话题。

那么，有没有办法来加载谷歌图表中这样或者我应该只使用iframe？因为我想会发生什么其他的图表从未被创造的东西？

So is there a way to load the google chart in this way or should I just use iframe ? Since I guess what happens that other chart never got created or something ?

在此先感谢！

如何使用AJAX和jQuery加载谷歌的图表？图表、如何使用、加载、jQuery

推荐答案