2

使用angular2-highcharts隐藏/打开左侧导航菜单时如何更改图表的宽度以填充div？

我尝试使用style="display:block; width: 100% !important;" 正如我发现的大多数资源所建议的那样，但它没有帮助。

这是在 mat-sidenav-container 和 mat-sidenav-content 中使用图表的示例：

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

还添加了屏幕截图：关闭左侧导航菜单后，图表宽度保持不变。 still_same_chart_width_size

4

2 回答 2

1

解决方案之一是延迟图表的呈现。我使用了 ngAfterViewInit() 生命周期钩子：

    ngAfterViewInit() {
     setTimeout(() => {
      if(this.chart) {
        this.chart.reflow();
      }
     },100);
    }
于 2017-12-06T09:35:11.227 回答
0

这可以用css完成

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

检查https://github.com/gevgeny/angular2-highcharts/issues/11

于 2017-12-04T11:48:36.890 回答