左側のナビゲーションメニューを非表示/非表示にするときに、angle2-highchartを使用してdivを埋めるためにグラフの幅を変更するにはどうすればよいですか？

Question

angle2-highchartsを使用して左側のナビゲーションメニューを隠す/開いたときにdivの値を補うためにグラフの幅を変更するにはどうすればいいですか？

style = "display：block; width：100％！important;"私が見つけたほとんどのリソースでお勧めしますが、それは助けになりませんでした。ここ

はマットsidenav容器とマットsidenavコンテンツ内部のチャートを使用した例である。

Htmlの

`<mat-sidenav-container class="sidenavContainer"> 
    <mat-sidenav #sideNav opened="true" mode="side" class="filters-viewer-sidenav"> 
    mat-sidenav 
    </mat-sidenav> 
    <mat-sidenav-content> 
    mat-sidenav-content 
    <button (click)="sideNav.toggle()"> 
     mat-sidenav-button 
    </button> 
    <div style="width: 100%; height: 100%"> 
     <chart [options]="options" style="display:block; width: 100% !important;"></chart> 
    </div> 
    </mat-sidenav-content> 
</mat-sidenav-container>` 

CSS

`html, body, mat-sidenav-container, .chart-wrapper { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
} 
.sidenav { 
    width: 240px; 
    height: 100%; 
    box-shadow: 3px 0 6px rgba(0,0,0,.24); 
}` 

が追加され、またスクリーンショット：I後左側のナビゲーションメニューを閉じると、グラフの幅は変わりません。 still_same_chart_width_size

Answer 1

これは、ソリューションのCSS

chart { 
    width: 100% !important; 
    margin: 0 auto; 
    display: block; 
} 

チェックhttps://github.com/gevgeny/angular2-highcharts/issues/11

Answer 2

一つで行うことができますが、チャートのレンダリングを遅らせることでした。 ngAfterViewInit（）ライフサイクルフックを使用しました：

ngAfterViewInit() { 
    setTimeout(() => { 
     if(this.chart) { 
     this.chart.reflow(); 
     } 
    },100); 
    }