angular - 如何将 amcharts4 XY 图表制作为可重用组件

Question

我有一个父组件：“dashboard-reports”
，我为 am4chart XY bar 创建了一个子组件（bar-chart.component）

我想为各种报告显示使用相同的组件，我们如何使用 angular 和 a4charts lib 来实现这一点

在dashboard-reports.componet.html（父组件）中

<div><app-bar-chart [barChartInput]='downTimeAnalysis'></app-bar-chart><div>
<div><app-bar-chart [barChartInput]='reservationAnalysis'></app-bar-chart></div>

在条形图 coponent.html 中

<div class="custom-card-body py-4 px-3">
    <div class="no-grid-kendo-loader">
        <div *ngIf="barLoading" class="k-i-loading"></div>
        <div id="barChat" style="height: 500px;"></div>
    </div>
</div>

bar-chart-component.ts 

export class BarChartComponent implements OnInit {
  private chart: am4charts.XYChart;
  public barLoading: boolean = false;

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styles: []
})

constructor(public translate: TranslateService,private zone: NgZone) { }

ngOnInit() {
this.zone.runOutsideAngular(() => {
  let chart = am4core.create('barChat', am4charts.XYChart);
  this.barLoading = true;
  this.chart = chart;
this.setupBarChat();
});

}

public setupBarchart() {
     //Horizontal axis
    let categoryAxis = barChart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "instrumentName";
    categoryAxis.renderer.grid.template.strokeWidth = 0;
    categoryAxis.fontSize = 11;

    //Vertical axis
    let valueAxis = barChart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.minGridDistance = 30;
    valueAxis.title.text = titleConfigureation;

    // showing bar chats data 
    let barChartSeries = barChart.series.push(new am4charts.ColumnSeries3D());
    barChartSeries.dataFields.valueY = "usageInHours";
    barChartSeries.dataFields.categoryX = "instrumentName";
    }

ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
       this.chart.dispose();
      }
    });
  }

如何绘制多个图表，现​​在只能正确绘制一个图表。第二个没有正确绘制

标签： angularamchartsamcharts4