Angular 4 AmChart

Posted 2023-03-13

【中文标题】Angular 4 AmChart

【英文标题】：

【发布时间】：2020-01-18 09:35:51

【问题描述】：

我有一个 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 时会导致错误。正如我所说，我已经从文档中复制了代码，但它仍然无法正常工作。

【参考方案1】：

问题是 init 方法应该是 ngOnInit 而不是 ngAfterViewInit。其余的都很好。 https://stackblitz.com/edit/angular-gu9tkx

区别是here

【参考方案2】：

我刚刚使用 amchart4 创建了一个新的 Angular 应用程序，按照指南没有任何错误。 您使用的是哪个版本的 Angular 和 TypeScript？ 正如指南所说，AmChart 需要 TypeScript 2.8 或更高版本。

【讨论】：

一定是这样。我有 v2.1.5

@AndriaToria 我正在使用 v2.7.3，但它对我来说仍然可以正常工作。您是否尝试过创建这样的图表： this.zone.runOutsideAngular(() => let chart = am4core.create("chartdiv", am4charts.XYChart); // ... 图表代码在这里 ... this.chart = 图表；);

【参考方案3】：

我在“tsconfig.json”中的“compilerOptions”下应用这些行

"noImplicitAny": false,
"strictNullChecks": false,

【参考方案4】：

您正在使用ngAfterViewInit(),ngOnDestroy() Lifecycle Hooks，因此您只需要实现接口即可。

export class PageComponent implements OnDestroy,AfterViewInit