Google Chart с вкладками Bootstrap

Я использую две (или более) диаграммы Google на странице с вкладками Bootstrap. В зависимости от моей навигации на вкладке диаграмма теряет размер для размера по умолчанию (?). Bellow - это уменьшенный тестовый пример с шагом, чтобы увидеть проблему:

https://jsfiddle.net/73o0rfqe/

Как воспроизвести:

Ситуация № 1:

Перейдите на вкладку Два. Диаграмма изменяется до фактического размера только после щелчка на вкладке. Я ищу способ сделать его после загрузки страницы (до щелчка на вкладке).

Ситуация # 2:

Перейдите на вкладку Два, нажмите вкладку TwoC, нажмите вкладку Один, нажмите вкладку Два, нажмите TwoA. Теперь график теряет фактический размер. Перейдите на вкладку Один, нажмите вкладку Два. Теперь диаграмма снова отображается с фактическим размером.

Эта часть кода:

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
});

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

PS: Любое предложение по оптимизации этого кода тоже поможет. Спасибо.

Ответ 1

Проблема заключается в том, что вы перерисовываете диаграмму с помощью

$("a[href='#One']").on('shown.bs.tab', function (e) {
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
    clearChart();
});

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

(как примечание, я не понимаю, почему вы загружаете пакет google на вкладках, это вызывает много загрузок с серверов googles. Что-то вроде

$("a[href='#One']").on('shown.bs.tab', function (e) {
    drawChart();
});

будет достаточно.)

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

Ответ 2

При реализации charts, graphs внутри tabs может возникнуть проблема изменения размера содержимого.

Причина такого типа проблем

Во вкладке Bootstrap, когда мы переключаем вкладки, активная вкладка будет иметь свойство display: block; остальные tab-contents применяются к display: none;.

Это основная причина этой проблемы, если элемент div имеет свойство display: none;, там width также считается 0px.

Чтобы переопределить эту проблему, я добавил следующий CSS. Вместо того, чтобы скрывать вкладки с помощью display: none;, я обрабатывал высоту и переполнение strong > с помощью этого метода ширина не будет установлена на 0px.

CSS

.tab-content>.tab-pane {
  height: 1px;
  overflow: hidden;
  display: block;
 visibility: hidden;
}
.tab-content>.active {
  height: auto;
  overflow: auto;
  visibility: visible;
}

Я разветкил ваш код у вас. jsfiddle link в вопросе (https://jsfiddle.net/73o0rfqe/).

Вот ссылка, которая имеет обновленный код (т.е. только добавила вышеприведенный CSS)

https://jsfiddle.net/swasatz/28qttaqb/2/

Посмотрите на скрипку, надеюсь, это может вам помочь.

Спасибо.

Примечание. Это один из способов решения этой проблемы с помощью CSS.

Ответ 3

По-видимому, это проблема CSS. Это решение, которое работало над проблемой, которую я испытывал, загружая диаграммы в скрытые вкладки:

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow-y: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}