amCharts 4 CDN 网络::ERR_FILE_NOT_FOUND答案

【问题标题】：amCharts 4 CDN net::ERR_FILE_NOT_FOUNDamCharts 4 CDN 网络::ERR_FILE_NOT_FOUND
【发布时间】：2019-02-22 18:50:08
【问题描述】：

我正在尝试测试找到 here 的 amCharts 4 Javascript 示例代码，但我在控制台中收到以下错误：

charts.html:9 GET file://www.amcharts.com/lib/4/core.js net::ERR_FILE_NOT_FOUND
charts.html:10 GET file://www.amcharts.com/lib/4/charts.js net::ERR_FILE_NOT_FOUND
charts.html:11 GET file://www.amcharts.com/lib/4/maps.js net::ERR_FILE_NOT_FOUND
charts.html:17 Uncaught ReferenceError: am4core is not defined
at charts.html:17

我已经在 Google Chrome（版本 72.0.3626.119）和 Firefox 中尝试过，但都产生了相同的结果。页面无法定位 CDN 并显示图表。

访问链接时，一切似乎都是正确的，因此这似乎不是问题。我还下载了文件并尝试在本地连接，再次产生相同的结果。

下面的代码 sn-p 按预期运行并显示饼图没有问题，但在 Chrome 或 Firefox 中打开它时它对我不起作用。

任何建议将不胜感激。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>AMCharts Example</title>
			
		<script src="//www.amcharts.com/lib/4/core.js"></script>
		<script src="//www.amcharts.com/lib/4/charts.js"></script>

	</head>
	<body>

		<div id="chartdiv" style="width: 900px; height: 800px;"></div>

		<script>
		// Create chart instance
		var chart = am4core.create("chartdiv", am4charts.PieChart);
		
		// Create pie series
		var series = chart.series.push(new am4charts.PieSeries());
		series.dataFields.value = "litres";
		series.dataFields.category = "country";
		
		// Add data
		chart.data = [{
		  "country": "Lithuania",
		  "litres": 501.9
		}, {
		  "country": "Czech Republic",
		  "litres": 301.9
		}, {
		  "country": "Ireland",
		  "litres": 201.1
		}, {
		  "country": "Germany",
		  "litres": 165.8
		}, {
		  "country": "Australia",
		  "litres": 139.9
		}, {
		  "country": "Austria",
		  "litres": 128.3
		}, {
		  "country": "UK",
		  "litres": 99
		}, {
		  "country": "Belgium",
		  "litres": 60
		}, {
		  "country": "The Netherlands",
		  "litres": 50
		}];
		
		// And, for a good measure, let's add a legend
		chart.legend = new am4charts.Legend();
		</script>
		
	</body>
</html>

在更改脚本 src 标记以包含 https 协议后，正如丹尼尔所建议的那样，我收到以下错误：

core.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
charts.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
maps.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
charts.html:17 Uncaught ReferenceError: am4core is not defined
at charts.html:17

【问题讨论】：

标签： javascript html amcharts

【解决方案1】：

您在 <script> 标记中使用了相对于协议的路径，但 404 错误在 URL 上显示了 file:// 协议，这表明您正在从 file:// URL 而非真实 URL 进行测试网络服务器。

（您在问题中发布的代码在从实时服务器测试时可以正常工作）：

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

// Create pie series
var series = chart.series.push(new am4charts.PieSeries());
series.dataFields.value = "litres";
series.dataFields.category = "country";

// Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
}];

// And, for a good measure, let's add a legend
chart.legend = new am4charts.Legend();

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>

<div id="chartdiv" style="width: 900px; height: 800px;">
  </div>

要么在 localhost 上测试您的代码，要么将这些 <script> 标签切换为使用完整的 https://（或 http://）协议。

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>

【讨论】：

感谢您的回复，丹尼尔。不幸的是，我尝试使用完整的 https:// 协议，但由于某种原因，它也不起作用。
你能扩展一下“那根本行不通”吗？大概它不再抛出 404 错误了；还有其他错误吗？您的代码在上面的 sn-p 中运行良好，即使从 file:// 位置加载，如果脚本 src 更改为包含协议...
我的意思是我仍然收到 net::ERR_FILE_NOT_FOUND 错误。它略有不同，但似乎是相同性质的问题。例如 core.js:1 加载资源失败：net::ERR_FILE_NOT_FOUND。正如您所观察到的，我不是从实时服务器运行，而是直接从我的桌面打开 html 文件。
嗯，我不知道该告诉你什么，它在上面的 sn-p 和将代码加载为 file://... 时对我来说都很好。 js:1" 部分新错误消息表明它是从第一个脚本内部报告的，而不是从您的 html 文件中报告的，这很奇怪；我不确定那里发生了什么。您可以尝试从 localhost 或其他服务器进行测试，以排除这种可能性吗？和/或在问题中包含您在更改脚本 src 标记以包含协议后现在看到的完整错误消息。
感谢您的帮助。我绝对不会在将来从 file:// 进行测试。虽然从 file:// 打开它时仍然遇到这些错误确实让我感到困扰，但我至少可以按照您的建议在服务器上测试图表。