Использование .hide () и .show () с визуализацией Google - PullRequest
5 голосов
/ 20 декабря 2011

Я создал линейный график с визуализацией Google. Я проверил это, и он работает, как ожидалось. Проблема в том, что когда я запускаю страницу с визуализацией .hide (), а затем нажимаю кнопку, чтобы показать ее, она не будет отображаться. Вот урезанная версия того, что у меня есть.

<script language="JavaScript">
    $(document).ready(function(){
        $('#visualization').hide();
        $('#show').click(function() {
            $('#visualization').show();
        });
        $('#hide').click(function() {
            $('#visualization').hide();
        });

    });
// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']});
// Begin Annoted Time Line Chart - 1
      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Number of Users');
          //data.addColumn('string', 'title1');
          data.addRows(10);
data.setValue(0, 0, new Date(2011, 11 ,1));
          data.setValue(0, 1, 21);
          data.setValue(1, 0, new Date(2011, 11 ,2));
          data.setValue(1, 1, 24);
// Do this for the rest of the chart

...
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
              document.getElementById('visualization'));
          annotatedtimeline.draw(data, {'displayAnnotations': true});
        }

      google.setOnLoadCallback(drawVisualization);

</script>
<body>
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a>
    <div style="border:solid">
                <div id="visualization" style="width: 100%; height: 400px;"></div>
        </div>
</body>

Если я закомментирую .hide () в начале, то две кнопки для отображения и скрытия работают нормально, но когда они изначально скрыты, они не работают. Я попытался разместить код для визуализации над частью запроса, но он все равно не будет работать.

Кто-нибудь знает, как это исправить?

Спасибо

Craig

EDIT

Я смог использовать это SetTimeout (функция () { $ ( '#') Вкладки Вкладки (). // или скрыть () }, 50); });

Ответы [ 2 ]

5 голосов
/ 22 декабря 2011

Графики Gviz будут отображаться неправильно (часто очень маленькие / близкие к невидимым), если отображаются в скрытом элементе.Вам нужно перерисовать график после того, как элемент станет видимым.

Простой пример этого, основанный на вашем коде, будет что-то вроде добавления функции рисования к обратному вызову обработчика show:

$('#visualization').show(function() {
    drawVisualization();
});

Обратный вызов будет выполнен после завершения шоу.

1 голос
/ 31 марта 2013

Я попробовал совет, предоставленный Оли выше, но перерисовка не сработала для меня в Chrome.

Лучшим подходом для меня было определение высоты и ширины на графике с фиксированными числами. https://developers.google.com/chart/interactive/docs/gallery/bubblechart описывает параметры.

Я просто использовал это, и оно работает:

   var options = {
      title: '<%= t("views.participants.ranking.s23") %>',
      colors:['#3f3f3f', '#199EDA'],
      chartArea: {top: 30, left: 80, width: 490, height: 300},
      height: 500,
      width: 710,
      legend: {position: 'right', alignment: 'start'},
      sizeAxis: {maxSize: 20}
      }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...