2

所以我的情况如下：

我有一个创建谷歌图表的页面，我将图表放在 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>

我确实用 jQuery $(document).ready() 检查了 google.setOnLoadCallback，可以混合吗？

和其他一些主题。

那么有没有办法以这种方式加载谷歌图表，或者我应该只使用 iframe 吗？因为我猜想其他图表从未创建过会发生什么？

提前致谢！

4

2 回答 2

1

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

并使用 jquery load 而不是 ajax get 现在它可以按我的意愿工作。

于 2013-09-05T13:09:40.107 回答
0

尝试这个 -

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

于 2018-01-10T08:49:50.447 回答