На размер холста влияет переключение слайдов jQuery

Question

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

HTML:

<p> 
       <a href="javascript: showTests();">See chart</a>

</p>

 <section id="charts_wrapper">


 </section>

CSS:

 #charts_wrapper{
    display: none;
}

.chartContainer{
    height: 300px;
    width: 100%;
    margin-bottom: 50px;
}

JS, который генерирует диаграмму:

 window.onload = function () {
    var grades = <?php echo json_encode($grades);?>;
    if("" != grades){
        var  chartObject1 = {

              title:{

              text: ""              
         },

         axisY: {
           prefix: "",
           suffix: "%",
           minimum: 0,
           maximum: 100,
           interval: 5,
           title: "Notas"
       },
       axisX: {

            title: "Subjects"
       },
         data: [            
           { 

            type: "bar",

            toolTipContent: "{label}: {y}%",
            dataPoints: []
          }
          ]

        };

           for(var key in grades) {
                   var value = grades[key];

                   var obj = {};
                   obj.label = key;
                   obj.y = parseInt(value);

                   chartObject1['data'][0]['dataPoints'].push(obj);


        }


        var chartdiv = '<div class="chartContainer" id="chartContainer1"></div>';


         $('#charts_wrapper').append(chartdiv);

         var chart1 = new CanvasJS.Chart("chartContainer1", chartObject1);
         chart1.render();

    }

}

JS дисплей div:

 function showTests(){
     $('#charts_wrapper').slideToggle();

 }

Буду признателен за любую помощь.

Answer 1

Вы могли бы попытаться вызвать событие изменения размера в jQuery после того, как ваш слайд-тумблер завершился?

function showTests(){
    $('#charts_wrapper').slideToggle();
    $(window).trigger('resize');   //trigger resize event from javascript
}