Resize c3.js диаграмму после удаления «дисплей: нет» формы DIV

Question

Так у меня есть функция предварительного элемента нагрузки и не использовать «дисплей: нет» на скрытые диаграммы,

<div class="col-sm-9 topTenWebCus" ></div> 

javscript:

$(document).ready(function() { 
    window.setTimeout(function(){ 
     $(".topTenWebCus").css("display","none"); 
     },200); 
}); 

И после этого я получил еще одну функцию OnClick, чтобы удалить "дисплей: нет" CSS

$("#buttonFire").click(function(){ 
         $(".topTenWeb30d").css("display","none"); 
         $(".topTenWebCus").css("display","block"); 
        }); 

Он отлично работает. но он не изменил бы размер, даже если у меня есть загрузочный бутстрап на веб-сайт.

Я собираюсь использовать внутреннюю функцию для выполнения .resize(), но она не работает, есть ли лучший способ исправить проблему изменения размера?

Update 1:

Диаграмма будет изменять размер себя, если скорость масштабирования изменения пользователем.

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

Update2 Я пытаюсь использовать .show() и .hide(), но не повезло

Раствор образца

$("#buttonFire").click(function(){ 
         $(".topTenWeb30d").css("display","none"); 
         $(".topTenWebCus").css("display","block"); 
          chart.flush() // chart depends on your chart's name it could be anything like charrt112.flush() 
        }); 

Answer 1

Ваша проблема, похоже, не с boorst рэп. Проверьте это jsFiddle, ваш точный код отлично подходит для отображения правильной ширины столбца после отображения.

Без дополнительной информации о том, какую графическую библиотеку вы используете, моя догадка похожа на большинство графических библиотек, когда вы получаете ее размер, когда она впервые отображается. Когда размер div изменяется, вам придется вручную вызывать такие вещи, как resize, redraw или referesh и т. Д. На вашем графическом объекте в зависимости от вашей библиотеки диаграмм.

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

Обновление для c3.js

После того, как вы повторно отобразить ваш ДИВ попробуйте позвонить chart.flush(); и посмотреть, если он изменяет правильно.

$("#buttonFire").click(function(){ 
    $(".topTenWeb30d").css("display","none"); 
    $(".topTenWebCus").css("display","block"); 
    chart.flush(); // use reference to your chart object 
}); 

Если chart.flush() не работает, как последний вариант можно установить ширину, высоту диаграммы динамически в зависимости от ваших размеров Див как так.

chart.resize({ 
    height: $(".topTenWebCus").innerHeight(), 
    width: $(".topTenWebCus").innerWidth() 
}); 

Answer 2

Я думаю, что вам требуется это, если я правильно вас понять :

$(window).resize(function(){ 
    $("#buttonFire").trigger('click'); 
});