如何在 amchart 4 中显示无数据可用消息？

如何解决如何在 amchart 4 中显示无数据可用消息？

我使用 amcharts4 使用 angular 8

当没有来自 API 的数据时，我想在图表中间显示“无数据可用”消息

在 html 中

<div class="ss">
    <div class="no-grid-kendo-loader">
        <div *ngIf="chartRaceLoading" class="k-i-loading"></div>
        <div #chartRace style="height: 500px;"></div>
    </div>
  </div>

在 ts

import { AfterViewInit,Component,ElementRef,ngzone,OnDestroy,OnInit,ViewChild } from '@angular/core';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import { Input } from '@angular/core';
import { ConfigData } from '@app/services/config-data';
import * as _ from 'lodash';
declare var $: any;

@Component({
  selector: 'app-bar-chart-race',templateUrl: './bar-chart-race.component.html',styles: []
})
export class BarChartRaceComponent implements OnInit,AfterViewInit,OnDestroy {
  @ViewChild("chartRace",{ static: true }) private chartDom: ElementRef;
  private mappingKeys: any;
  public inputFromParent: any = [];
  private barChartRace: am4charts.XYChart;
  public chartRaceLoading: boolean = false;
  constructor(public translate: TranslateService,private zone: ngzone,public configData: ConfigData,) { }
  @input()
  set barChartRaceInput(data: Array<any>) {
    if (data) {
      this.inputFromParent = data;
      if(this.inputFromParent.length) {
        this.chartRaceLoading = true;
        if(this.barChartRace) {
          this.barChartRace.dispose();
          let chartRace = am4core.create(this.chartDom.nativeElement,am4charts.XYChart);
          this.barChartRace = chartRace;
          this.setupBarChartRace(this.barChartRace);
        }
      }
    }
   if(this.barchartRace) {  // setBarChartRaceIndicator -- used to show a message,this.setBarChartRaceIndicator(this.barchartRace);
    }
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      let chart = am4core.create(this.chartDom.nativeElement,am4charts.XYChart);
      this.barChartRace = chart;
    });
  }



public setBarChartRaceIndicator(barChartRace) {
    barChartRace.events.on("beforevalidated",(ev) => {
      // check if there's data
      if (ev.target.data.length == 0) {
        this.showIndicator();
      }
      else if (this.indicator) {
        alert('bar hide');
        this.hideIndicator();
      }
    });
  }

  public showIndicator() {
    //Translate content
    let noDataConfigureation = "";
    this.translate.get('noDataAvailable').subscribe((translateData) => {
      noDataConfigureation = translateData;
    })
    if (this.indicator) {
      this.indicator.show();
    }
    else {
      this.indicator = this.barChartRace.tooltipContainer.createChild(am4core.Container);
      this.indicator.background.fill = am4core.color("#fff");
      this.indicator.background.fillOpacity = 0.8;
      this.indicator.width = am4core.percent(100);
      this.indicator.height = am4core.percent(100);
      var indicatorLabel = this.indicator.createChild(am4core.Label);
      indicatorLabel.text = noDataConfigureation;
      indicatorLabel.align = "center";
      indicatorLabel.valign = "middle";
      indicatorLabel.fontSize = 12;
      indicatorLabel.fill = am4core.color('#958989');
    }
  }

  public hideIndicator() {
    this.indicator.hide();
  }

  //Bar chart Race
  private setupBarChartRace(chartRace) {
    let totalConfigureation = "";
    this.translate.get('total').subscribe((translateData) => {
      totalConfigureation = translateData;
    })
    chartRace.padding(20,20,20);
    chartRace.data = this.inputFromParent;
    chartRace.cursor = new am4charts.XYCursor();
    // Adding labels text and labels positions and properties
    let label = chartRace.plotContainer.createChild(am4core.Label);
    label.x = am4core.percent(10);
    label.y = am4core.percent(10);
    label.horizontalCenter = "right";
    label.verticalCenter = "middle";
    label.dx = -15;

    //Horizontal axis
    let categoryAxis = chartRace.yAxes.push(new am4charts.CategoryAxis());
    categoryAxis.datafields.category = this.mappingKeys.y;
    categoryAxis.renderer.grid.template.strokeWidth = 1;
    categoryAxis.fontSize = 11;
    //Vertical axis
    let valueAxis = chartRace.xAxes.push(new am4charts.ValueAxis());
    valueAxis.renderer.minGriddistance = 30;
    valueAxis.renderer.grid.template.strokeWidth = 1;
    // showing bar chats data 
    let chartRaceseries = chartRace.series.push(new am4charts.ColumnSeries());
    chartRaceseries.datafields.valueX = this.mappingKeys.x;
    chartRaceseries.datafields.categoryY = this.mappingKeys.y;
    chartRaceseries.tooltipText = `${totalConfigureation}: ${this.configData.currencyFormatSymbol} [bold]{valueX.}[\]`;
    chartRaceseries.columns.template.tooltipText = `${totalConfigureation}: ${this.configData.currencyFormatSymbol} [bold]{valueX.value}[\]`;
    chartRaceseries.columns.template.tooltipY = 1;
    chartRaceseries.columns.template.strokeOpacity = 0;
    chartRaceseries.columns.template.height = am4core.percent(25);
    chartRaceseries.columns.template.width = am4core.percent(10);
    chartRaceseries.columns.template.column.cornerRadiusBottomright = 5;
    chartRaceseries.columns.template.column.cornerRadiusTopRight = 5;

    // Adding label bulltets text and label bullet properties
    let labelBullet = chartRaceseries.bullets.push(new am4charts.LabelBullet())
    labelBullet.label.horizontalCenter = "right";
    labelBullet.label.fill = am4core.color("#fff");
    labelBullet.label.text = `${this.configData.currencyFormatSymbol} {values.valueX.workingValue}`;
    labelBullet.label.textAlign = "end";
    labelBullet.label.dx = -10;
    // Showing legned data list and adding hover effects
    let legend = new am4charts.Legend();
    legend.maxHeight = 120;
    legend.scrollable = true;
    legend.parent = chartRace.chartContainer;
    legend.itemContainers.template.togglable = false;
    legend.marginTop = 20;
    chartRaceseries.events.on("ready",(ev) => {
      let legenddata = [];
      chartRaceseries.columns.each((column) => {
        legenddata.push({
          name: column.dataItem.categories.categoryY,fill: column.fill,columnDataItem: column.dataItem
        });
      });
      legend.data = legenddata;
    })
    legend.itemContainers.template.events.on("hit",(ev) => {
      if (!ev.target.isActive) {
        ev.target.dataItem.dataContext['columnDataItem'].hide();
        ev.target.isActive = !ev.target.isActive;
      }
      else {
        ev.target.dataItem.dataContext['columnDataItem'].show();
        ev.target.isActive = !ev.target.isActive;
      }
    });
    legend.itemContainers.template.events.on("over",(ev) => {
      ev.target.dataItem.dataContext['columnDataItem'].column.isHover = true;
      ev.target.dataItem.dataContext['columnDataItem'].column.showTooltip();
    });

    legend.itemContainers.template.events.on("out",(ev) => {
      ev.target.dataItem.dataContext['columnDataItem'].column.isHover = false;
      ev.target.dataItem.dataContext['columnDataItem'].column.hidetooltip();
    });

    chartRaceseries.columns.template.adapter.add("fill",(fill,target) => {
      return chartRace.colors.getIndex(target.dataItem.index);
    })

    this.chartRaceLoading = false;
  }
  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.barChartRace) {
       this.barChartRace.dispose();
      }
    });
  }
}

当在一个事件中没有数据作为图表的输入时，调度错误调度事件处理程序错误即将到来，如果有数据没有问题，请帮忙

是否有任何关键类型的处理可以在 amcharts4 中不显示数据消息，请建议有关此库的任何文档...