Question

我正在尝试使用角度重现一个简单的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>

它应该显示一个简单的有向图，但是在使用有向图文件时，我陷入了困境。

Answer 1

该错误是由最后一个import语句引起的，应该是这样的：import * as am4plugins_forceDirected from“ @ amcharts / amcharts4 / plugins / forceDirected”; 感谢amcharts团队github页面上的martynasma，我得以解决该问题！

尝试使用amcharts再现有向图时，出现错误：找不到“导出'default'（导入为'am4plugins_forceDirected'）”

1 个答案: