jquery - 使用 jQuery .load() 将 Google 可视化页面加载到 div 中

Question

我有一个显示 Google 可视化图表的页面:

page1.html

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    // Added data

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 900, height: 400});
  }
</script>

我还有第二页:

page2.html

<div id="container">

</div>

来自 page2.html 我想使用这个:

$('#container').load("page1.html");

但是，这行不通。这是我所期望的。我的问题是:这可能实现吗？您可以使用 ajax 将包含 Google Charts 生成的图表的页面加载到 div 中吗？

干杯!

Answer 1

在第1页输入代码，编写此脚本以动态加载API

<script type="text/javascript">
        var chartLoaded = false;
        function loadAPI()
        {            
            var script = document.createElement("script");
            script.src = "http://www.google.com/jsapi?callback=loadChart";
            script.type = "text/javascript";
            document.getElementsByTagName("head")[0].appendChild(script);
        }

        function loadChart() 
        {
            google.load("visualization", "1", { packages: ["corechart"], "callback": loaded });
        }

        function loaded() 
        {
            chartLoaded = true;
           //alert('loaded. Now you can load the chart');
            drawChart();
        }

        function drawChart() 
        {
            if (!chartLoaded) 
            {
                alert('chart api not loaded yet.');
                return;
            }
            else 
                alert('chart api has loaded.');

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

            data.addColumn('string', 'Years');
            data.addColumn('number', 'sales');

            data.addColumn('number', 'Expenses');

            data.addRows([
                                ['2004', 1000, 400],
                                ['2006', 2500, 100],
                                ]);

            var options = {
                title: 'Company Performance',
                vAxis: { title: 'Year', titleTextStyle: { color: 'red'} }
            };

            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>

在第 1 页的就绪函数上，调用方法 loadAPI();