javascript - Angular 4 AmChart
问题描述
我有 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();
}
});
}
}
但我仍然收到错误 EXCEPTION: Uncaught (in promise): TypeError: {} is not a constructor
TypeError: {} is not a constructor
。Unhandled Promise rejection: {} is not a constructor ; Zone: angular ; Task: Promise.then ; Value: TypeError: {} is not a constructor
. 我试过调试它,当我使用 am4core 时会导致错误。正如我所说,我已经从文档中复制了代码,但它仍然无法正常工作。
解决方案
问题是应该是 ngOnInit 而不是 ngAfterViewInit 的 init 方法。其余的都很好。https://stackblitz.com/edit/angular-gu9tkx
区别就在这里
推荐阅读
- c# - IVI-COM Driver C# 如何在调用 Initialize 方法之前更改串口配置?
- firebird - 如何使用 Firebird 触发器从表中获取值
- javascript - 当我滑动输入范围滑块时,flexbox 中的表单元素不固定
- python - Python 十进制计算不精确
- php - Laravel 护照未经身份验证的消息
- conv-neural-network - 图像数据增强和训练
- javascript - 如何防止在 React Native 功能中单击按钮时刷新页面
- python - 如何替换表中的 NaN 以获取每日股票收益?
- python - 什么原因以及如何防止 BigQuery 错误:调用时超过 120.0s 的截止日期
- python - “UnboundLocalError:分配前引用的局部变量'args'”以及如何解决?