Question

我的chart.js有问题，如果我读取离线json文件，图表会出现，但如果我使用Firebase的在线json，它就不会显示任何内容，jsut白屏。

我在firebase中导出json文件，然后才在在线模式下使用它，但它不会显示任何内容。

这是我的代码，只有一页。

＆＃13;

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

＆＃13;

在控制台上，一切都是相同的输出 Online JSON

这里是离线JSON Offline JSON

Answer 1

在com.example.demo.controller

中删除 window.onload = function() {}

因为在获取JSON之前窗口已经加载

json文件离线可以通过chart.js读取，但在线json无法读取

1 个答案: