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

Question

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

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

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

我也尝试过使用 float:left 与 float: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

看到的

来自 firefox

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

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 的 advanced pie（应该可以轻松集成到任何 Angular 组件中）

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

Firefox Highcharts is not showing up but it's all OK in Chrome and Edge

firefox

highcharts

angular

angular-highcharts