Я воспроизвожу один из ориентированных графиков 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