Загрузка страницы визуализации Google в div с помощью jQuery .load ()

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");

Но это не работает.Что я и ожидал.Мой вопрос: возможно ли это достичь?Можете ли вы загрузить в div, используя ajax, страницу с графиком, созданным Google Charts?

Cheers!

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();

Answer 2

Нет, вы не можете просто загрузить целую страницу в ваш div.Я бы предложил распаковать ваш скрипт в его собственный файл, а затем вызвать функцию для генерации вашего графика.Итак ... сначала

 function loadChart(element) {
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback( function() {
          var data = new google.visualization.DataTable();
          // Added data

          var chart = new google.visualization.LineChart(document.getElementById(element));
          chart.draw(data, {width: 900, height: 400});
     });
 }

Тогда вы можете просто позвонить loadChart(element), указав, куда вы хотите перейти на график.Таким образом, вы можете нарисовать график на любой странице, например

loadChart('#container');

Убедитесь, что вы включили файл js в свой заголовок!

Удачи:)