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

У меня возникла проблема, когда граф флота не отображался в интерфейсе с вкладками, потому что разделители-заполнители были дочерними элементами 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 original parent
    // container
    parentContainer.append(placeholderDiv);
}

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

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

Ответы

Ответ 1

Возможно, это лучшее решение. Его можно использовать для замены $.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

Единственное, что работает без 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 funtion. Но он должен работать для любого скрытого div или объекта.

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

Ответ 3

Это один из часто задаваемых вопросов:

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

Ответ 4

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

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

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

Вы также можете установить visibility:hidden, а затем изменить код вкладок примерно так:

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

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

Ответ 5

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

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

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