如何在Angular 7中实现太阳爆发图？

npm install @swimlane/ngx-charts --save

import { Component } from '@angular/core';
import { single } from './data'; // 假设有一个名为data的数据文件

@Component({
  selector: 'app-solar-flare-chart',
  templateUrl: './solar-flare-chart.component.html',
  styleUrls: ['./solar-flare-chart.component.css']
})
export class SolarFlareChartComponent {
  single: any[];

  constructor() {
    this.single = single; // 将数据赋值给组件的属性
  }

  // 可选：定义图表的配置项
  view: any[] = [700, 400];
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = '时间';
  showYAxisLabel = true;
  yAxisLabel = '能量';

  // 可选：定义图表的颜色方案
  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // 可选：定义图表的事件处理函数
  onSelect(event) {
    console.log(event);
  }
}

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)"
>
</ngx-charts-bar-vertical>

export const single = [
  {
    "name": "2010",
    "value": 2243772
  },
  {
    "name": "2011",
    "value": 1126000
  },
  {
    "name": "2012",
    "value": 2962154
  },
  {
    "name": "2013",
    "value": 2573634
  }
];