angular - 带有 API 数据的 Highcharts Angular

Question

我正在使用来自 https://github.com/highcharts/highcharts-angular 的官方 Highcharts Angular 包装器并且在我的 Angular 6 项目中得到了一个测试图表。

我遇到的问题是试图让图表仅在我从 api 检索数据后显示。

这是我的 html:

<div class="row">
    <div class="col-md-12" *ngIf="!loading">
        <highcharts-chart 
        [Highcharts]="Highcharts"
        [options]="chartOptions"
        style="width: 100%; height: 400px; display: block;"
    ></highcharts-chart>
        </div>
</div>

这是我的组件

loading = true;
Highcharts: any;
chartOptions: any;


public constructor(
    private dashboardService: DashboardService) {
}

ngOnInit() {
    this.dashboardService.getClaimProviderCountsByMonth()
        .pipe(first())
        .subscribe(
            data => {
                // this.chartOptions.series = [{
                //     data: data
                // }];
                this.Highcharts = Highcharts;
                this.chartOptions = {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Stacked column chart'
                    },
                    xAxis: {
                        categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    },
                    series: data.data
                };
                this.loading = false;
            },
            () => { });

}

但是我收到错误“错误类型错误:无法读取未定义的属性‘图表’”

我的 API 数据格式正确，如果我硬编码它，它可以正常工作，但我显然遇到了异步问题。

Answer 1

由于您是从 API 异步加载图表数据，因此您需要使用 *ngIf 或安全导航操作符来检查图表选项，如下所示，

<div class="col-md-12" *ngIf="!loading && chartOptions">