画布大小受 jQuery 滑动切换的影响

Canvas size affected by jQuery slide toggle

本文关键字：影响 布大小 jQuery      更新时间：2023-09-26

>我有一个 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显示部分：

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

将不胜感激任何帮助。

您可以在幻灯片切换完成后尝试在 jQuery 中触发调整大小事件？

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