javascript - 在 Angular lib 中使用 Angular highchart

Question

我正在创建角度库，我想使用 highcharts-angular + highchart 但是我在使用它时遇到的问题只是得到ERROR TypeError: Cannot read properties of undefined (reading 'chart')

DashboardComponent.html:4 ERROR TypeError: Cannot read properties of undefined (reading 'chart')
   at Object.get [as chart] (system.src.js:457)
   at HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:51)
   at HighchartsChartComponent.wrappedUpdateOrCreateChart (highcharts-chart.component.ts:43)
   at HighchartsChartComponent.ngOnChanges (highcharts-chart.component.ts:30)
   at checkAndUpdateDirectiveInline (core.js:23630)
   at checkAndUpdateNodeInline (core.js:30761)
   at checkAndUpdateNode (core.js:30723)
   at debugCheckAndUpdateNode (core.js:31350)
   at debugCheckDirectivesFn (core.js:31314)
   at Object.eval [as updateDirectives] (DashboardComponent.html:17)

这里是highchart lib中的未定义错误

 updateOrCreateChart() {
   if (this.chart && this.chart.update) {
     this.chart.update(this.options, true, this.oneToOne || false);
   } else {
     this.chart = (this.Highcharts as any)[this.constructorType || 'chart'](
       this.el.nativeElement,
       this.options,
       this.callbackFunction || null
     );

     // emit chart instance on init
     this.chartInstance.emit(this.chart);
   }
 }

我的 HTML 代码

  <highcharts-chart
                            class="area-chart"
                            [Highcharts]="Highcharts"
                            [options]="chartOptions"
                          ></highcharts-chart>

我的 TS 代码

Highcharts: typeof Highcharts = Highcharts;
  constructorType = 'chart';
  chartOptions: Highcharts.Options = {
    exporting: {enabled: false},
    title: {
      text: ''
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: true,
          style: {
            fontWeight: '300'
          }
        }
      }
    },
    series: [{
      type: 'pie',
      name: 'Time share',
      data: [
        ['Front yard', 10.38],
        ['Closet', 26.33],
        ['Swin pool', 51.03],
        ['Like a boss', 4.77],
        ['Barking', 3.93]
      ]
    }]
  };

标签： javascriptangulartypescripthighchartsangular-library