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

问题描述

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

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

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

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

在 bar-chart-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();
      }
    });
  }

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

amcharts amcharts4 angular angular