Флот-график не отображается, когда родительский контейнер скрыт - PullRequest
Новая
       6

Флот-график не отображается, когда родительский контейнер скрыт

11 голосов
/ 25 марта 2011

У меня возникла проблема, из-за которой график с плавающей запятой не отображался в интерфейсе с вкладками, потому что заполнители div были дочерними элементами div с «display: none».Оси будут отображаться, но без содержимого графика.

Я написал ниже функцию javascript в качестве оболочки для функции plot, чтобы решить эту проблему.Это может быть полезно для других, делающих нечто подобное. 

function safePlot(placeholderDiv, data, options){

    // Move the graph place holder to the hidden loader
    // div to render
    var parentContainer = placeholderDiv.parent();
    $('#graphLoaderDiv').append(placeholderDiv);

    // Render the graph
    $.plot(placeholderDiv, data, options);

    // Move the graph back to it's original parent
    // container
    parentContainer.append(placeholderDiv);
}

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

#graphLoaderDiv{
    visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 150px;
}

Ответы [ 5 ]

8 голосов
/ 07 ноября 2012

Возможно, это лучшее решение.Его можно использовать как замену $.plot(): 

var fplot = function(e,data,options){
  var jqParent, jqHidden;
  if (e.offsetWidth <=0 || e.offetHeight <=0){
    // lets attempt to compensate for an ancestor with display:none
    jqParent = $(e).parent();
    jqHidden = $("<div style='visibility:hidden'></div>");
    $('body').append(jqHidden);
    jqHidden.append(e);
  }

  var plot=$.plot(e,data,options);

  // if we moved it above, lets put it back
  if (jqParent){
     jqParent.append(e);
     jqHidden.remove();
  }

  return plot;
};

. Затем просто переведите вызов на $.plot() и измените его на fplot()

.
2 голосов
/ 27 сентября 2014

Единственное, что работает без каких-либо хитростей CSS - это загрузить график через 1 секунду после этого: 

$('#myTab a[href="#tabname"]').on("click", function() {
    setTimeout(function() {
       $.plot($(divChartArea), data, options);       
    }, 1000);
});

или для старых jquery 

$('#myTab a[href="#tabname"]').click (function() {
      setTimeout(function() {
         $.plot($(divChartArea), data, options);       
      }, 1000);
    });

Приведенный выше пример применяется к тегам Bootstrap для функции Click. Но должен работать для любого скрытого div или объекта.

Рабочий пример: http://topg.org/server-desteria-factions-levels-classes-tokens-id388539 Просто перейдите на вкладку «Игроки», и вы увидите приведенный выше пример в действии.

1 голос
/ 25 марта 2011

Это FAQ:

Ваш #graphLoaderDiv должен иметь ширину и высоту, и, к сожалению, невидимые div не имеют их. Вместо этого сделайте его видимым, но установите его слева на -10000px. Затем, когда вы будете готовы показать его, просто установите для него значение 0px (или любое другое).

0 голосов
/ 07 апреля 2016

Я знаю, что это немного устарело, но вы также можете попробовать использовать плагин Resize для Flot.

http://benalman.com/projects/jquery-resize-plugin/

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

0 голосов
/ 27 марта 2011

Хорошо, теперь я понимаю, что вы на самом деле говорите ... Я все же думаю, что ваш ответ слишком сложен.Я только что попробовал это, используя интерфейс с вкладками, где график находится в скрытой вкладке, когда он загружен.Мне кажется, что он работает нормально.

http://jsfiddle.net/ryleyb/dB8UZ/

У меня там не было бита visibility:hidden, но это не казалось необходимым ...

Можно также установить visibility:hidden и затем изменить код вкладок на что-то вроде этого: 

$('#tabs').tabs({
  show: function(e,ui){
    if (ui.index != 2) { return; }
    $('#graphLoaderDiv').css('visibility','visible');
  }
});

Но, учитывая предоставленную информацию, ничего из этого не кажется особенно необходимым.

...