我有一个 Angular 项目,我正在尝试集成 amCharts。我的 html 页面如下所示:
<div class="col-md-12">
<div id="chartdiv" style="width: 100%; height: 500px"></div>
</div>
和我从文档复制的组件,但由于某种原因它不起作用:
import { Component, NgZone } 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";
am4core.useTheme(am4themes_animated);
@Component({
selector: 'page',
styleUrls: ['./page.scss'],
templateUrl: './page.html'
})
export class PageComponent {
private chart: am4charts.XYChart;
constructor(private service: PageService,private zone: NgZone) {
}
ngAfterViewInit() {
this.zone.runOutsideAngular(() => {
let chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
let data = [];
let visits = 10;
for (let i = 1; i < 366; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({ date: new Date(2018, 0, i), name: "name" + i, value: visits });
}
chart.data = data;
let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.renderer.minWidth = 35;
let series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY.value}";
chart.cursor = new am4charts.XYCursor();
let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series);
chart.scrollbarX = scrollbarX;
this.chart = chart;
});
}
ngOnDestroy() {
this.zone.runOutsideAngular(() => {
if (this.chart) {
this.chart.dispose();
}
});
}
}
但我仍然收到错误 异常:未捕获( promise 中):TypeError:{} 不是构造函数
类型错误:{} 不是构造函数
。 未处理的 Promise 拒绝:{} 不是构造函数;区域:有 Angular ;任务:Promise.then;值:类型错误:{} 不是构造函数
。我尝试调试它,当我使用 am4core 时会出现错误。正如我所说,我已从文档中复制了代码,但它仍然无法正常工作。
最佳答案
问题是 init 方法应该是 ngOnInit 而不是 ngAfterViewInit。其余的都很好。 https://stackblitz.com/edit/angular-gu9tkx
差异是here
关于javascript - Angular 4 AmChart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57975636/