问题描述
我使用 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 中不显示数据消息,请建议有关此库的任何文档...
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)