コンテナのサイズが動的に変更されたときにcanvasjsグラフのサイズを変更するにはどうすればよいですか？

Question

この例ではまず見https://codepen.io/merajahmed/pen/PJaeWR

window.onload = function() { 
 

 
var chart = new CanvasJS.Chart("chartContainer", { 
 
\t animationEnabled: true, 
 
\t exportEnabled: true, 
 
\t theme: "light1", // "light1", "light2", "dark1", "dark2" 
 
\t title:{ 
 
\t \t text: "Simple Column Chart with Index Labels" 
 
\t }, 
 
\t data: [{ 
 
\t \t type: "column", //change type to bar, line, area, pie, etc 
 
\t \t //indexLabel: "{y}", //Shows y value on all Data Points 
 
\t \t indexLabelFontColor: "#5A5757", 
 
\t \t indexLabelPlacement: "outside", 
 
\t \t dataPoints: [ 
 
\t \t \t { x: 10, y: 71 }, 
 
\t \t \t { x: 20, y: 55 }, 
 
\t \t \t { x: 30, y: 50 }, 
 
\t \t \t { x: 40, y: 65 }, 
 
\t \t \t { x: 50, y: 92, indexLabel: "Highest" }, 
 
\t \t \t { x: 60, y: 68 }, 
 
\t \t \t { x: 70, y: 38 }, 
 
\t \t \t { x: 80, y: 71 }, 
 
\t \t \t { x: 90, y: 54 }, 
 
\t \t \t { x: 100, y: 60 }, 
 
\t \t \t { x: 110, y: 36 }, 
 
\t \t \t { x: 120, y: 49 }, 
 
\t \t \t { x: 130, y: 21, indexLabel: "Lowest" } 
 
\t \t ] 
 
\t }] 
 
}); 
 
chart.render(); 
 

 
}

.sidebar { 
 
    background-color: black; 
 
    width: 150px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
.sidebar h1 { 
 
    color: white; 
 
} 
 

 
.portfolio { 
 
    background-color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 150px; 
 
    right: 0; 
 
    bottom: 0; 
 
    
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
} 
 

 
input[type=checkbox] { 
 
    display: none; 
 
} 
 

 
input:checked ~ .portfolio { 
 
    left: 0; 
 
} 
 

 
input:checked ~ label { 
 
    left: 0; 
 
} 
 

 
label { 
 
    z-index: 2; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 150px; 
 
    background-color: blue; 
 
    
 
    -moz-transition: left 0.5s ease; 
 
    transition: left 0.5s ease; 
 
}

<div class="main-wrap"> 
 
    <input id="slide-sidebar" type="checkbox" role="button" /> 
 
     <label for="slide-sidebar"><span>close</span></label> 
 
    <div class="sidebar"><h1>Settings</h1></div> 
 
    <div class="portfolio"> 
 
     
 
     <div id="chartContainer" style="height: 370px; width: 100%;"></div> 
 
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
    </div> 
 
</div>

私は閉じるボタンをクリックすると、全幅にグラフのサイズを変更したいのですが、グラフの幅がいない変更を行います。 グラフコンテナのサイズ変更の間にアニメーションがあるので、グラフをアニメーション期間中にそのコンテナの幅いっぱいにします。つまり、チャートはアニメーション中にその幅を拡大/縮小する必要があります。

Answer 1

グラフをレンダリングする関数は、onloadイベントによってトリガされます。

その関数定義を抽出して、たとえばrenderという名前を付けて、onresizeイベントの同じ関数をトリガーします。

window.onload = render; 
window.onresize = render;