访问API的Angular中的Highcharts

npm install highcharts --save

import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports: [
    // 其他引入模块
    HighchartsChartModule
  ],
  // 其他配置
})
export class AppModule { }

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

@Component({
  selector: 'app-chart',
  template: `
    <div [class]="chartClassName" [chart]="chart"></div>
  `,
  styles: [`
    .chart-container {
      width: 100%;
      height: 400px;
    }
  `]
})
export class ChartComponent {
  chart: Highcharts.Chart;
  chartClassName = 'chart-container';

  constructor() {
    // 初始化图表配置
    this.chart = {
      chart: {
        type: 'line'
      },
      title: {
        text: 'My Chart'
      },
      series: [{
        data: [1, 3, 2, 4]
      }]
    };
  }
}

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

@Component({
  selector: 'app-chart',
  template: `
    <div [class]="chartClassName" [chart]="chart"></div>
  `,
  styles: [`
    .chart-container {
      width: 100%;
      height: 400px;
    }
  `]
})
export class ChartComponent implements OnInit {
  chart: Highcharts.Chart;
  chartClassName = 'chart-container';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('api/data').subscribe((data: any) => {
      this.chart = {
        chart: {
          type: 'line'
        },
        title: {
          text: 'My Chart'
        },
        series: [{
          data: data
        }]
      };
    });
  }
}