javascript - Angular 4 AmChart

标签 javascript angular amcharts

我有一个 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/

相关文章:

javascript - 当以编程方式更改输入时,更改的解决方案不起作用

javascript - CSS 中类似 MaterialDesign 的显示过渡

Javascript 函数对象,this 关键字指向错误的对象

javascript - 作为 dojo 模板添加的小部件元素的registry.byId

angular - 错误 TS5023 : Unknown compiler option 'enableIvy'

javascript - 在amcharts中,有没有办法根据条件显示工具提示文本?

css - 为什么 CSS 在我的 Angular2 开发服务器和生产版本上看起来不同?

javascript - 如何从 Observable<Array<any>> 中删除特定元素

javascript - AmCharts:导出的图表只有背景网格

grid - amchart 在网格之间添加标签