amcharts TypeError: _amcharts_amcharts4_core__WEBPACK_IMPORTED_MODULE_3 __. useTheme не является функцией

Я воспроизвожу один из ориентированных графиков amcharts в angular, и после исправления нескольких ошибок я застрял на следующей, которую я не могу решить самостоятельно: ERROR Error: «Uncaught (in обещание): TypeError: _amcharts_amcharts4_core__WEBPACK_IMPORTED_MODULE_3__. useTheme не является функцией

Я обновил модуль 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


person DoraTheDestroyer    schedule 17.07.2019    source источник


Ответы (2)


Не уверен, что именно вызывает вашу ошибку, но я думаю, вам нужно вынести свой am4core.useTheme(am4themes_animated); за пределы класса - поместите его ниже импорта.

Также у меня создалось впечатление, что вам нужно использовать NgZone и запускать вне angular. Здесь есть хорошая документация.

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

person Sam    schedule 17.07.2019
comment
Спасибо за понимание, посмотрю! - person DoraTheDestroyer; 18.07.2019
comment
Я удалил весь код и оставил только импорт и файл am4core.useTheme (am4themes_animated); к которому я перешел непосредственно под операторами импорта, и он все еще дает мне ту же ошибку - person DoraTheDestroyer; 18.07.2019
comment
Я также заменил import am4themes_animated из @ amcharts / amcharts4 / themes / animated; с импортом am4themes_dark из @ amcharts / amcharts4 / themes / dark; и я все еще получаю ту же ошибку - person DoraTheDestroyer; 18.07.2019

Здесь am4plugins_forceDirected не был импортирован, поэтому просто импортируйте его. Дополнительную информацию об этом можно найти в этом выпуске Git https://github.com/amcharts/amcharts4/issues/1473

Используйте этот импорт

import * as am4plugins_forceDirected 
from"@amcharts/amcharts4/plugins/forceDirected";
person Parshuram Reddy    schedule 26.05.2020