Показать Google Visualization API в Fancybox (всплывающее окно JS) - PullRequest
Новая
       12

Показать Google Visualization API в Fancybox (всплывающее окно JS)

2 голосов
/ 21 октября 2011

Итак, я пытаюсь встроить диаграмму визуализации Google в Fancybox (всплывающее окно JS). Диаграмма правильно отображается на странице .. но не в пределах fancybox. Есть идеи?

Вот код, который я использую 

 $(".class").fancybox(function() { 

      drawChart();

 });

--- редактировать --- 

 $(".view_research").fancybox({

 'onStart'   : drawChart

 });

** это редактирование также не работает, но по крайней мере использует один из аргументов, разрешенных fancybox

Изображение загрузки fancybox отображается, когда я нажимаю на ссылку ... но фактическое всплывающее окно никогда не загружается.

Следует также отметить, что если я удаляю диаграмму Google со страницы, которую пытается загрузить всплывающее окно, оно загружается без помех.

Заранее спасибо, Фил

Ответы [ 2 ]

2 голосов
/ 23 октября 2011

Чтобы заставить это работать, вам нужно:

  1. используйте опцию onComplete вызова fancybox
  2. явно указывает атрибут стиля ширины и высоты для div, в котором будет отображаться диаграмма

С gviz достаточно часто, чтобы div отображался / отображался перед тем, как пытаться вставить в него диаграмму, иначе вы можете получить довольно странные диаграммы (не уверен, что происходит, когда вы пытаетесь отобразить диаграмму в невидимый div ..). OnComplete позаботится об этом. Использование библиотеки изображений gviz - хороший способ решения этой проблемы в других случаях.

В любом случае, вот рабочий пример использования fancybox и gviz (код круговой диаграммы взят из google code plays ): 

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
      <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
      <script type="text/javascript">
          google.load('visualization', '1', {packages: ['piechart']});
      </script>
      <script type="text/javascript">
      </script>
      <script>

      function drawVisualization() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
        data.setValue(3, 0, 'Watch TV');
        data.setValue(3, 1, 2);
        data.setValue(4, 0, 'Sleep');
        data.setValue(4, 1, 7);
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('data')).draw(data);
      }

      $(document).ready(function() {
        $("a#inline").fancybox({
          'hideOnContentClick': true,
          onComplete: drawVisualization
        });
      });

      </script>
    </head>
    <body>
      <a id="inline" href="#data">Click here to see chart</a>
      <div style="display:none"><div style='height:200px;width:200px' id="data"></div></div>
    </body>
  </html>
0 голосов
/ 21 октября 2011

Функция drawChart должна специально нарисовать диаграмму во всплывающем окне, созданном fancybox, просто вызов функции внутри обратного вызова не принесет пользы.

...