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

【问题标题】：Canvas size affected by jQuery slide toggle受 jQuery 滑动切换影响的画布大小
【发布时间】：2015-01-16 17:07:24
【问题描述】：

我有一个 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();

 }

将不胜感激。

【问题讨论】：

你能创建一个 JSfiddle 或其他我们可以使用活动代码的东西吗？您的示例很困难，因为我们没有创建图表的数据。
我尝试用简化的小提琴重新创建您的问题，但我没有看到大小问题：fiddle -- 抱歉
我不知道这一定是 CanvasJS.Chart 中的错误或其他什么:(无论如何我放弃了隐藏显示。

标签： javascript jquery css canvas canvasjs

【解决方案1】：

您可以尝试在滑动切换完成后触发 jQuery 中的调整大小事件吗？

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

【讨论】：