Question

我在Angular7应用中有一个Highcharts。

当我尝试通过在ngOnDestroy中调用destroy（）杀死饼图时，它抛出未捕获的TypeError：无法读取未定义的属性'forExport' 在a.Chart.destroy（highcharts.js：293）

Package.json

    "@angular/core": "7.2.12",
    "highcharts": "7.1.1",
    "highcharts-angular": "2.4.0",

HTML

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [update]="false"
  [runOutsideAngular]="true"
  style="width: 300px; height: 280px; display: block;"
></highcharts-chart>

打字稿

export class MyChartComponent implements OnInit, AfterViewInit, OnDestroy {

  public Highcharts = Highcharts; // required
  private chartRef;

  public chartOptions = {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie',
      events: this.getHighchartsEvents()
    },
    // [...]
  }

  private getHighchartsEvents() {
    const self = this;
    return {
      load: function(event) {
        self.chartRef = this;
      }
    }
  }

  ngOnDestroy(): void {
    if(this.chartRef) {
      this.zone.runOutsideAngular(() => {
        this.chartRef.destroy();
        // Uncaught TypeError: Cannot read property 'forExport' of undefined
        // at a.Chart.destroy (highcharts.js:293)
      });
    }
  }

沙盒示例：https://codesandbox.io/s/4r4zm77lm4

如果图表被do Destroy按钮破坏了（位于图表的组件内），则工作正常。

当通过将chartVisible设置为false（通过“隐藏”按钮）删除组件而破坏了图表时，将执行ngOnDestroy，该.destroy（）会引发错误。

请告知。预先感谢。

Answer 1

发生此错误是因为highcharts-angular包装程序破坏了图表本身。在这里检查：https://github.com/highcharts/highcharts-angular/blob/master/highcharts-angular/src/lib/highcharts-chart.component.ts#L62-L67

因此，您正在尝试销毁它。

带有destroy的包装器代码：

  ngOnDestroy() { // #44
    if (this.chart) {  // #56
      this.chart.destroy();
      this.chart = null;
    }
  }

ngOnDestroy中调用的destroy（）引发无法读取未定义的属性'forExport'

1 个答案: