我已经在angular 7应用程序中实现了amchart4。我面临的问题是图表未使用最新数据刷新,换句话说,当数据更改时图表未显示。如果您看到我正在通过输入属性(即get set属性)传递系列
html
<div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
class="col-md-7">
<app-pie-chart [series]="allocation_series"></app-pie-chart>
</div>
组件
public getAllocationsDetails(evalDate: string) {
if (this.ManagerStrategyId != null) {
this.initGrid();
// this.spinner.show();
this.allocationsService.getAllocationsDetails(this.ManagerStrategyId, evalDate)
.subscribe(data => {
this.AllocationDetails = data;
this.GridOptions.rowData = this.AllocationDetails;
this.allocation_series = this.AllocationDetails.ChartData;
if(!this.AllocationDetails.ManagerAllocations || !this.AllocationDetails.ManagerAllocations.length) {
this.GridOptions.suppressNoRowsOverlay = true;
//this.GridOptions.api.showNoRowsOverlay();
} else {
this.FirmName = this.AllocationDetails.ManagerAllocations[0].FirmName;
}
this.ColumnDefs = this.getColumns();
// this.spinner.hide();
setTimeout(() => {
this.GridOptions.api.sizeColumnsToFit();
}, 100, true);
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
}
图表
import { Component, NgZone, Input } from '@angular/core';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
am4core.useTheme(am4themes_animated);
@Component({
template: ` <div id="chartdiv" [style.width.%]="100" [style.height.px]="500" > "hideCredits" : true</div>`,
selector: 'app-pie-chart'
})
export class PieChartComponent implements AfterViewInit, OnDestroy {
private chart: am4charts.PieChart;
// @Input() series: any;
_series: any;
get series(): any {
return this._series;
}
@Input('series')
set series(value: any) {
this._series = value;
}
constructor(private zone: NgZone) { }
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
const chart = am4core.create('chartdiv', am4charts.PieChart);
chart.responsive.enabled = true;
if (this.series) {
chart.data = this.series;
const pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = 'Percent';
pieSeries.dataFields.category = 'ProductName';
pieSeries.colors.list = [
am4core.color('#717171'),
am4core.color('#62B1D0'),
am4core.color('#3AA6D0'),
am4core.color('#024C68'),
am4core.color('#226078'),
am4core.color('#717171'),
am4core.color('#62B1D0'),
am4core.color('#3AA6D0'),
am4core.color('#024C68'),
am4core.color('#226078'),
am4core.color('#717171'),
am4core.color('#62B1D0'),
am4core.color('#3AA6D0'),
am4core.color('#024C68'),
am4core.color('#226078'),
];
this.chart = chart;
}
});
}
ngOnDestroy() {
this.zone.runOutsideAngular(() => {
if (this.chart) {
this.chart.dispose();
}
});
}
}