Сценарий :
- Файл json
- Чтение данных и графика json с использованием старших диаграмм
Проблема: получение can't convert undefined to object при загрузке html без точки останова в Mozilla Firefox.
- При загрузке с точкой останова график строится идеально.
- без точки останова, получение
myjson как не определено в функции chartFormyJson
Код : у меня есть проект узла, и я запускаю http server, используя npm run serve.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="scriptFile.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
scriptFile.js
var myjson;
fetch('./data.json').then(response => response.json()).then(data => {
myjson=data["myjson"];
})
if( document.readyState !== 'loading' ) {
console.log( 'document is already ready, just execute code here' );
chartFormyJson();
} else {
document.addEventListener('DOMContentLoaded', function () {
console.log( 'document was not ready, place code here' );
chartFormyJson();
});
}
function chartFormyJson(){
var myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Plot bar graph per year'
},
yAxis: {
title: {
text: 'Count'
}
},
xAxis: {
categories: Object.keys(myjson)
},
series: [{
data: Object.values(myjson)
}]
});
}
Нужно руководство, почему так происходит. Кажется, что-то связано с загрузкой данных / переменных / порядка вызова js из html.ButЯ не специалист по этим вопросам, поэтому буду очень признателен за любую помощь по этому вопросу.
Дайте мне знать, если потребуется дополнительная информация.