Недопустимые размеры для графика, width = 0, height = 400 внутри скрытой вкладки

У меня есть эта ошибка, когда я вставляю диаграммы в скрытые вкладки, такие как второй, третий и т.д. вот ошибка:

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

Я использовал bootstrap 2 и jquery:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

Вот библиотеки:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

И css:

#plotarea
{
    max-width: none;
    height: 400px;
}
#pie 
{
    max-width: none;
    height: 400px;
}
#barmonth 
{
    max-width: none;
    height: 400px;
}
#baryear 
{
    max-width: none;
    height: 400px;
}

div с идентификатором каждой диаграммы (всегда меняйте идентификатор на график, который мне нужно показать, например, график, пирог, бармон, барий и т.д.):

<div id="plotarea"></div>

И я добавляю этот стиль, чтобы исправить ошибку ширины .ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }, но даже это диаграмма не рисует диаграммы внутри этих скрытых вкладок, только нарисуйте первую вкладку, которая находится в первом представлении... можете ли вы сейчас если есть форма для его исправления?

Я использую шаблон харизмы.

С уважением!

Ответ 1

Ну, я уже сделал это!

Если у вас есть эта библиотека <script src="js/jquery.flot.resize.min.js"></script>, вам нужно только изменить ее внутри styles.css(файл таблиц стилей):

max-width: none;
height: 400px;

с этим:

width: 100%;
height: 400px;

Теперь графики всегда изменяются на каждом экране.

Ответ 2

У меня была такая же проблема. Для меня работало другое решение.

Удостоверьтесь, что вы устанавливаете высоту и ширину style = "width: 100%; height: 400px" (проверьте Недопустимые размеры для графика, width = 0, height = 400 внутри скрытой вкладки)
Убедитесь, что флот не ищет какой-либо div, который НЕ существует. Это было так, потому что я скопировал его со страницы, на которой было три сюжета, тогда как я использовал первую и третью. Я мог найти его, используя консоль хром (он разбился после того, как не нашел второй div на странице, поэтому третий не был застроен. Просто закомментируйте неиспользуемый график в js, и он отлично работал).

Ответ 3

У меня была такая же проблема в IE8, а иногда и у Android, мои диаграммы изначально скрыты с помощью функции переключения, и это вызвало ошибку, пытающуюся построить график внутри скрытого div. CSS уже определен, так что это не помогло.

Перемещение jQuery скрыть и переключить код ПОСЛЕ того, как элементы div div будут решены.