jquery show() не отображается правильно для диаграмм высоких диаграмм

Question

Так что я пытаюсь отобразить 3 графика в одном и том же div, переключая кнопки, которые показывают/скрывают другие divs соответственно. Я установил 2 других графика на

style= "display: none" 

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

Вид по умолчанию день на кнопку день. Однако, когда я нажимаю на другие 2 кнопки, ширина графика увеличивается, и она отображается так.

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

Фрагмент кода для графа:

<button onclick="showDay('tasks')">Day on Day</button> 
<button onclick="showWeek('tasks')">Week on Week</button> 
<button onclick="showMonth('tasks')">Month on Month</button> 
<div class="portlet-body"> 
    <div id="tasks"></div> 
    <div id="tasksWeek" style="display: none"></div> 
    <div id="tasksMonth" style="display: none"></div> 
</div> 

<script> 
new Highcharts.StockChart({{masterDic['tasks']|safe}}); 
new Highcharts.StockChart({{masterDic['tasksWeek']|safe}}); 
new Highcharts.StockChart({{masterDic['tasksMonth']|safe}}); 
</script> 

фрагмент коды для вызова (хак сейчас)

<script> 
    function showDay(id) { 
     var idDay = "#"+id; 
     var idWeek = "#"+id+"Week"; 
     var idMonth = "#"+id + "Month"; 
     $(idWeek).hide(10); 
     $(idMonth).hide(10); 
     $(idDay).show(10); 
    } 
    function showWeek(id) { 
     var idDay = "#"+id; 
     var idWeek = "#"+id+"Week"; 
     var idMonth = "#"+id + "Month"; 
     $(idMonth).hide(10); 
     $(idDay).hide(10); 
     $(idWeek).show(10); 
    } 
    function showMonth(id) { 
     var idDay = "#"+id; 
     var idWeek = "#"+id+"Week"; 
     var idMonth = "#"+id + "Month"; 
     $(idDay).hide(10); 
     $(idWeek).hide(10); 
     $(idMonth).show(10); 
    } 
</script> 

Кто-нибудь есть какие-либо идеи о том, как это исправить? Большое спасибо! :)

EDIT:

CSS для портлета тела (весь след при использовании инспектировать элемента):

https://jsfiddle.net/ovnrpnb5/

Answer 1

Фигурные его если кто-то заинтересован. Tldr: call reflow() на диаграмме после показа.

Я использовал hide() и show() вместо вкладок в соответствии с комментарием @Grzegorz Blachliński, поэтому данное решение не работало.

Я нашел эту ссылку, который показал вам, как получить доступ к элементу в пределах вашего HTML http://ahumbleopinion.com/highcharts-tips-accessing-chart-object-from-container-id/

Я использовал Highcharts CDN, который, по-видимому Isnt 3.0.1, поэтому метод не был JQuery работает. Таким образом, я сделал следующую функцию и назвал его после каждого шоу()

// HACK TO GET IT TO DISPLAY PROPERLY 
function callReflow(id){ 
    var index = $(id).data('highchartsChart'); 
    var chart = Highcharts.charts[index]; 
    chart.reflow(); 
} 

работал как шарм :)

Answer 2

setTimeout(function(){ 
    $(window).resize(); 
}) 

Зов это после того, как шоу()