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

ff29svar 于 2022-12-12 发布在 jQuery

关注(0)|答案(2)|浏览(158)

所以我的情况如下：
我有一个页面，创建一个谷歌图表，我把图表放在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？因为我猜会发生什么事，其他图表从来没有得到创建或什么？
提前感谢！

jquery

来源：https://stackoverflow.com/questions/18619588/how-to-load-google-chart-using-ajax-and-jquery

2条答案

按热度按时间

deikduxw1#

好吧，看起来问题是在另一个页面上加载javascript。过了一段时间，我发现了这个Loading Google Visualisations via Ajax
并且使用了jquery load而不是 AJAX get，现在它按照我想要的那样工作。

赞(0）回复(0）举报 2022-12-12

oxalkeyp2#

试试这个-

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);

var jsonData = $.ajax({
  type: "POST",
  dataType: "json",
  url: 'stuff/chart.html',
  async: false
}).responseText;

var data = new google.visualization.DataTable(jsonData);

var options = {
  title: 'TITLE HERE',
  height: 550,
  width: 1100,
  curveType: 'function',
  legend: { position: 'bottom' }
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, options);

而json的响应应该是这样的-https://developers.google.com/chart/interactive/docs/reference#dataparam

赞(0）回复(0）举报 2022-12-12

我来回答

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

2条答案

相关问题

热门标签

最新问答