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中触发resize事件吗？

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

受jQuery幻灯片切换影响的画布大小

1 个答案: