Error: ```Uncaught ReferenceError: am4core is not defined``` while creating Amcharts 4 chart

Error: ```Uncaught ReferenceError: am4core is not defined``` while creating Amcharts 4 chart

在使用 Amcharts4 库创建柱形图时,我收到以下错误消息:

Uncaught ReferenceError: am4core is not defined

我的代码如下:

JS

am4core.ready(function() {

  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
  var chart = am4core.create("chartdiv", am4charts.XYChart);

  var chartData = [{
    "category": 2009,
    "income": 23.5,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 1
    }, {
      "category": 2,
      "income": 2
    }, {
      "category": 3,
      "income": 1
    }, {
      "category": 4,
      "income": 3
    }]

  }, {
    "category": 2010,
    "income": 26.2,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 4
    }, {
      "category": 2,
      "income": 3
    }, {
      "category": 3,
      "income": 1
    }, {
      "category": 4,
      "income": 4
    }]
  }, {
    "category": 2011,
    "income": 30.1,
    "url": "#",
    "description": "click to drill-down",
    "months": [{
      "category": 1,
      "income": 2
    }, {
      "category": 2,
      "income": 3
    }, {
      "category": 3,
      "income": 1
    }]
  }];

  chart.data = chartData;

  // Create axes

  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "category";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 30;
  categoryAxis.numberFormatter.numberFormat = "#";

  categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
    if (target.dataItem && target.dataItem.index & 2 == 2) {
      return dy + 25;
    }
    return dy;
  });

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

  // Create series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = "income";
  series.dataFields.categoryX = "category";
  series.name = "Income";
  series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;
  series.columns.template.propertyFields.url = "url"; 
  

  var columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 2;
  columnTemplate.strokeOpacity = 1;

  var title = chart.titles.create();
  title.text = "Yearly Data";
  var resetLabel = chart.plotContainer.createChild(am4core.Label);
  resetLabel.text = "[bold]<< Back to Yearly Data[/]";
  resetLabel.x = 20;
  resetLabel.y = 20;
  resetLabel.cursorOverStyle = am4core.MouseCursorStyle.pointer;
  resetLabel.hide();
  resetLabel.events.on('hit', function(ev) {
    resetLabel.hide();
    ev.target.baseSprite.titles.getIndex(0).text = "Yearly Data";
    ev.target.baseSprite.data = chartData;
  });

  series.columns.template.events.on("hit", function(ev) {
    if ('object' === typeof ev.target.dataItem.dataContext.months) {
      // update the chart title
      ev.target.baseSprite.titles.getIndex(0).text = ev.target.dataItem.dataContext.category + ' monthly data';
      // set the monthly data for the clicked month
      ev.target.baseSprite.data = ev.target.dataItem.dataContext.months
      resetLabel.show();
    }
  }, this);
});

HTML:

<body>
    <div class="titel">
        <p> Title</p>
    </div>
    <script src="https://www.cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://www.cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://www.cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>
    <script type="text/javascript" src="./test_drill_down.js"></script>
    <div id="chartdiv"> </div>
    <link href="style.css" rel="stylesheet" type="text/css">
    </div>
</body>
</html>

但我不明白为什么会出现此错误,模块是在 javascript 图表脚本之前加载的。我使用的 HTML 文件与我在其他图表中使用的相同,并且它确实可以正常工作。

我做错了什么?

您的网址错误 - 没有 www.cdn。要么使用其中一个,但不能同时使用两者。

cdn:

    <script src="https://cdn.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://cdn.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>

www:

    <script src="https://www.amcharts.com/lib/4/core.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/4/index.js" type="text/javascript"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js" type="text/javascript"></script>