chart.js可以离线读取json文件，但在线json无法读取
[英]json file offline can read by chart.js, but online json can't read
问题描述
I have some problem with my chart.js, if i read offline json file, chart will be appear, but if I use online json from Firebase, it won't show anything, jsut white screen. 
我的chart.js出现问题，如果我读取了离线json文件，则会显示图表，但是如果我使用Firebase的在线json，它将无法显示任何内容，而jsut白屏。
I export json file from firebase, before I use it in online mode, but it won't show anything. 我先从firebase导出json文件，然后再以在线模式使用它，但它不会显示任何内容。
this is my code, just one page. 这是我的代码，只有一页。
<!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>
On the console, everything is same output Online JSON 在控制台上，所有内容都是相同的输出Online JSON
And here is offline JSON Offline JSON 这是离线JSON 离线JSON
1 个解决方案
解决方案1
1 已采纳 2017-07-12 07:15:04
Just remove window.onload = function() {} inside $.getJSON() 只需删除 $.getJSON() 中的 window.onload = function() {}
Because window is already loaded before getting JSON 因为在获取JSON之前已经加载了窗口
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.