angular - 尝试使用 amcharts 重现有向图时出现错误：“找不到导出“默认”（导入为“am4plugins

问题描述

我正在尝试使用 angular 重现一个简单的 amcharts 有向图示例，但我遇到了一个似乎无法解决的错误。错误说“在'@amcharts/amcharts4/plugins/forceDirected'中找不到导出'默认'（导入为'am4plugins_forceDirected'）。

我重新安装了 amcharts 并检查了有问题的文件，它似乎应该如此。无论如何，我用他们网站上的那个替换了整个 amcharts 文件夹，但并没有解决问题。

这是代码的样子：

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";

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.css']
})

export class GraphComponent {
  private chart: am4plugins_forceDirected.ForceDirectedTree;

  constructor(private zone: NgZone) {}

  ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
      let chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);
      let networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries());


    chart.data = [
      {
        name: "Core",
        children: [
          {
            name: "First",
            children: [
              { name: "A1", value: 100 },
              { name: "A2", value: 60 }
            ]
          },
          {
            name: "Second",
            children: [
              { name: "B1", value: 135 },
              { name: "B2", value: 98 }
            ]
          },
          {
            name: "Third",
            children: [
              {
                name: "C1",
                children: [
                  { name: "EE1", value: 130 },
                  { name: "EE2", value: 87 },
                  { name: "EE3", value: 55 }
                ]
              },
              { name: "C2", value: 148 },
              {
                name: "C3", children: [
                  { name: "CC1", value: 53 },
                  { name: "CC2", value: 30 }
                ]
              },
              { name: "C4", value: 26 }
            ]
          },
          {
            name: "Fourth",
            children: [
              { name: "D1", value: 415 },
              { name: "D2", value: 148 },
              { name: "D3", value: 89 }
            ]
          },
          {
            name: "Fifth",
            children: [
              {
                name: "E1",
                children: [
                  { name: "EE1", value: 33 },
                  { name: "EE2", value: 40 },
                  { name: "EE3", value: 89 }
                ]
              },
              {
                name: "E2",
                value: 148
              }
            ]
          }

        ]
      }
    ];

    networkSeries.dataFields.value = "value";
    networkSeries.dataFields.name = "name";
    networkSeries.dataFields.children = "children";
    networkSeries.nodes.template.tooltipText = "{name}:{value}";
    networkSeries.nodes.template.fillOpacity = 1;
    networkSeries.manyBodyStrength = -20;
    networkSeries.links.template.strength = 0.8;
    networkSeries.minRadius = am4core.percent(2);

    networkSeries.nodes.template.label.text = "{name}"
    networkSeries.fontSize = 10;

    });
  }

  ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
      if (this.chart) {
        this.chart.dispose();
      }
    });
  }
}

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

它应该显示一个简单的有向图，但我卡在使用有向图文件的地方。

标签： angularamcharts4

angular - 尝试使用 amcharts 重现有向图时出现错误：“找不到导出“默认”（导入为“am4plugins_forceDirected”）

问题描述

解决方案

推荐阅读