我的 Chart.js 有一些问题，如果我读取离线 json 文件，图表将会出现，但如果我使用 Firebase 的在线 json，它不会显示任何内容，只是白屏。
在在线模式下使用它之前，我从 firebase 导出了 json 文件，但它不会显示任何内容。
这是我的代码，只有一页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart JSON</title>
<!--<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
</head>
<body>
<!--<div class="container" style="width: 90%;">-->
<div class="container" style="width: 400px, height 400px;">
<canvas id="canvas">
</canvas>
</div>
<p id="jsjs"></p>
<script>
var lm = document.getElementById('jsjs');
//$.getJSON('sensormini.json', function (json) {
//$.getJSON('sensor.json', function (json) {
//$.getJSON('export.json', function (json) {
$.getJSON('https://skripsi-adeguntoro.firebaseio.com/sensor.json', function (json) {
//console.log([json]);
console.log(json);
lm.innerText = JSON.stringify(json);
var suhu = json.map(function(item) {
return item.temp;
});
var time = json.map(function(item) {
return item.time;
});
//console.log([suhu]);
console.log(suhu);
var time2 = [time]
var suhu2 = [suhu]
var config = {
type: 'line',
data: {
labels: time,
datasets: [{
label: "Suhu",
backgroundColor: "rgba(220,220,220,1)",
fill: false,
data: suhu
}]
},
options: {
responsive: true,
title:{
display:true,
text:'Suhu Ruang Server'
},
events: ['mousemove'],
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Jam'
},
ticks:{
//autoSkip: true,
//maxTicksLimit: 5
//showXLabels: 10
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Suhu'
},
ticks: {
//beginAtZero: false,
//reverse:false,
stepSize: 5
//autoSkip: true
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
</body>
</html>在控制台上，一切都是相同的输出 Online JSON
这是离线 JSON Offline JSON
最佳答案
只需删除 $.getJSON() 内的 window.onload = function() {}
因为窗口在获取 JSON 之前已经加载
关于javascript - 离线的json文件可以被chart.js读取，但是在线的json无法读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45050731/