_amcharts_amcharts4_core__WEBPACK_IMPORTED_MODULE_3__.useTheme "TypeError: amcharts is not a function“

Question

我在angular中重新生成了一个_amcharts_amcharts4_core__WEBPACK_IMPORTED_MODULE_3__.useTheme有向图，在修复了多个错误之后，我遇到了以下一个我似乎无法自己解决的问题: ERROR Error："Uncaught (in promise)：TypeError: amcharts is not a function

我更新了amcharts模块，它没有修复它。我从amcharts网站下载了模块，并替换了模块中的文件，但仍然没有修复它。我想我的进口产品没问题。

<div id="chartdiv" style="width: 100%; height: 500px"></div>

import { CapabilitiesService } from './../../services/capabilities.service';
import { Component, OnInit, 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";
import am4plugins_forceDirected from "@amcharts/amcharts4/plugins/forceDirected";


@Component({
  selector: 'app-directed-graph',
  templateUrl: './directed-graph.component.html',
  styleUrls: ['./directed-graph.component.css']
})
export class DirectedGraphComponent implements OnInit {

  allSystemsData = new Array < {} > ();
  linksBetweenSystems = new Array < {} > ();
  connectedSystems = new Array < {} > ();

  constructor(
    private capabilitiesService : CapabilitiesService
    ) { }

  async ngOnInit() {

    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
    var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())


    networkSeries.dataFields.linkWith = "linkWith";
    networkSeries.dataFields.name = "name";
    networkSeries.dataFields.id = "name";
    networkSeries.dataFields.value = "value";

    networkSeries.dataFields.children = "children";

    networkSeries.maxRadius = am4core.percent(1);

    networkSeries.nodes.template.label.text = "{name}"
    networkSeries.fontSize = 8;
    networkSeries.linkWithStrength = 0.1;

    var nodeTemplate = networkSeries.nodes.template;

    nodeTemplate.tooltipText = "{name}";
    nodeTemplate.adapter.add("tooltipText", (text,target) => {
      if(target.dataItem) {
          switch(target.dataItem.level){
            case 0:
                return "name : {name}";
            case 1:
                return "name : {name}\nparent : {parent.name}";
          }
      }
      return text;
    })
    nodeTemplate.fillOpacity = 1;
    nodeTemplate.label.hideOversized = true;
    nodeTemplate.label.truncate = true;

    var linkTemplate = networkSeries.links.template;
    linkTemplate.strokeWidth = 2;
    var linkHoverState = linkTemplate.states.create("hover");
    linkHoverState.properties.strokeOpacity = 1;
    linkHoverState.properties.strokeWidth = 2;

    nodeTemplate.events.on("over", function (event) {
        var dataItem = event.target.dataItem;
        dataItem.childLinks.each(function (link) {
            link.isHover = true;
        })
    })

    nodeTemplate.events.on("out", function (event) {
        var dataItem = event.target.dataItem;
        dataItem.childLinks.each(function (link) {
            link.isHover = false;
        })
    })

    networkSeries.maxLevels = 1;
    networkSeries.data = [
      {
          "name":"Phoebe",
          "value":102,
          "children":[

            {
                "name":"Paolo2",
                "value":1
            },
            {
                "name":"Pete",
                "value":10
            },
            {
                "name":"Chip",
                "value":1
            },
            {
                "name":"Timothy (Burke)",
                "value":1
            },
            {
                "name":"Emily",
                "value":17
            },
            {
                "name":"Dr. Roger",
                "value":3
            }
          ]
      },
      {
          "name":"Ross",
          "value":216,
          "children":[
            {
                "name":"Carol",
                "value":10
            },
            {
                "name":"Celia",
                "value":2
            },
            {
                "name":"Julie",
                "value":6
            },
            {
                "name":"Chloe",
                "value":1
            },
            {
                "name":"Bonnie",
                "value":4
            },
            {
                "name":"Messy Girl (Cheryl)",
                "value":5
            },
            {
                "name":"Jill",
                "value":1
            },
            {
                "name":"Charlie",
                "value":13
            }
          ]
      },
      {
          "name":"Chandler",
          "value":167,
          "children":[
            {
                "name":"Aurora",
                "value":2
            },
            {
                "name":"Jill Goodacre",
                "value":1
            },
            {
                "name":"Janice",
                "value":12
            },
            {
                "name":"Mrs Bing",
                "value":6
            },
            {
                "name":"Janine",
                "value":9
            },
            {
                "name":"Erin",
                "value":1
            },
            {
                "name":"Cecilia",
                "value":3,
                "linkWith":[
                  "Gunther"
                ]
            }
          ]
      }
    ];


  }
}

输出应该与以下内容非常相似：https://codepen.io/pen/?&editable=true

Answer 1

我不确定到底是什么导致了你的错误，但我认为你需要把你的am4core.useTheme(am4themes_animated);放在类之外--把它放在imports下面。

另外，我的印象是你必须使用NgZone并在angular之外运行。他们在这里有很好的文档。

https://www.amcharts.com/docs/v4/getting-started/integrations/using-angular2/

Answer 2

这里没有导入am4plugins_forceDirected，所以只需导入它即可。你可以在这个Git issue https://github.com/amcharts/amcharts4/issues/1473中找到更多关于这个的信息

使用此导入

import * as am4plugins_forceDirected 
from"@amcharts/amcharts4/plugins/forceDirected";