当我使用来自http.get的数据时，无法在Angular 2中呈现Highcharts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  chartData$: Observable<any>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.chartData$ = this.http.get('your_data_url');
  }
}

<app-highcharts [data]="chartData$ | async"></app-highcharts>

import { Component, Input, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-highcharts',
  template: '<div [id]="chartId"></div>',
  styleUrls: ['./highcharts.component.css']
})
export class HighchartsComponent implements OnInit {
  @Input() data: any;
  chartId: string;

  constructor() {
    this.chartId = 'chart-' + Math.random().toString(36).substring(7);
  }

  ngOnInit() {
    Highcharts.chart(this.chartId, {
      // Highcharts配置选项
      series: [{
        data: this.data
      }]
    });
  }
}