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

我有一张画布图，尺寸很好。我决定添加一个链接来显示或隐藏图表，现在图表的宽度缩小了。当我通过拖动窗口句柄来调整浏览器窗口的大小时，它将更改为假定的宽度

HTML:

生成图表的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();

    }

---

非常感谢您的帮助。

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

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

---

您能创建一个JSFIDLE或其他我们可以使用活动代码的东西吗？你的例子很难，因为我们没有创建图表的数据。我试图用一把简化的小提琴重新创建你的问题，但我没有看到大小问题：-对不起，我不知道这一定是CanvasJS.chart中的一个bug或其他东西：无论如何，我放弃了隐藏显示。

 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();

    }

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

 }

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