amCharts 4 CDN net :: ERR_FILE_NOT_FOUND - PullRequest
Новая
       9

amCharts 4 CDN net :: ERR_FILE_NOT_FOUND

0 голосов
/ 22 февраля 2019

Я пытаюсь проверить найденный пример кода 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 и отобразить диаграмму.

При просмотре ссылок все кажется правильным, поэтому проблема не возникает.Я также скачал файлы и попытался подключиться локально, снова получая тот же результат.

Фрагмент кода ниже работает, как ожидалось, и отображает круговую диаграмму без проблем, но она не работает для меня при открытиив 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

1 Ответ

0 голосов
/ 22 февраля 2019

Вы используете относительные к протоколу пути в своих тегах <script>, но 404 ошибки показывают протокол file:// в URL-адресах, что говорит о том, что вы тестируете по URL-адресу file:// вместо реальноговеб сервер.

(Ваш код, указанный в вопросе, работает нормально при тестировании с живого сервера): 

// 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>

Либо протестируйте свой код на локальном хосте, либо переключите эти теги <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>
...