왼쪽 네비게이션 메뉴를 숨기거나 열 때 angular2-highcharts를 사용하여 div를 채우기 위해 차트의 너비를 변경하는 방법은 무엇입니까?

Question

angular2-highcharts를 사용하여 왼쪽 탐색 메뉴를 숨기거나 열 때 div 채우기 위해 차트 너비를 변경하는 방법 ??

style = "display : block; width : 100 %! important;"를 사용하려고했습니다.은 내가 찾은 대부분의 자료에서 권장대로 사용되었지만 도움이되지 않았습니다.

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); 
}` 

라이트 또한 스크린 샷 : 여기

는 매트 sidenav 컨테이너와 매트 sidenav 콘텐츠 안에 차트를 사용한 예이다 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); 
    }