angular - Firefox Highcharts 未显示，但在 Chrome 和 Edge 中一切正常

Question

以下饼图显示在 Chrome 和 Edge 中，但不在 Firefox（最新版本 88）中。

我正在尝试水平对齐两个 div。左边是表格，右边是图表。

我省略了表单 html 中的所有细节，因为我认为它们不相关。

我也试过用float:leftvsfloat:none;或float: right代替display: inline-block

  <div  style="display: inline-block;vertical-align:top;">
  <h2>{{title}}</h2>
  <form [formGroup]="rangeFormGroup">  
    <div>  
      <mat-form-field appearance="fill">  
      </mat-form-field> 
    </div>  
    <div>
      <mat-form-field appearance="fill">
      </mat-form-field> 
      <br>
      <mat-form-field appearance="fill">
      </mat-form-field> 
    </div>
  </form>
</div>
<div style="display: inline-block;height: 500px;width: 500px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions[0]"
    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngular"
  ></highcharts-chart>
</div>

这是我从 chrome 看到的

从火狐

当我构建时，我收到一条警告说

Warning: F:\myapp\src\app\app.component.ts depends on 'highcharts'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

但也许这也不是原因（或者为什么它只影响Firefox？）

Answer 1

问题出在 app.component.ts 中。

Firefox 希望在图表选项中设置高度，如下所示

  options: Highcharts.Options[] = [{
    chart: {
      plotBackgroundColor: 'white',
      plotBorderWidth: undefined,
      plotShadow: false,
      type: 'pie',
      height: 500,  // FIREFOX WANTS THIS !!!
    },
    credits: {
      enabled: false

问题解决了，但是，另一方面，人们也可以考虑 ngx-charts 中的高级饼图 （应该可以很容易地集成到任何 Angular 组件中）