Question

尝试填写图表，该图表通过JSON请求从另一个文件获取其信息。但是有些东西坏了，我不知道是什么。

控制台很干净。

    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(() => {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'X');
        data.addColumn('number', 'Bitcoin');

        $.getJSON('./data.php', (json) => {
            $.each(json, (key, value) => {
                data.addRows([
                    [new Date(parseInt(value.timestamp)).getHours(), parseFloat(value.price)]
                ]);
            });
        });

        var options = {
            hAxis: {
                title: 'Datum'
            },
            vAxis: {
                title: 'Prijs'
            },
            backgroundColor: '#fff'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });

Chart picture

Answer 1

$.getJSON异步运行，
这表示$.getJSON之后的代码在$.getJSON完成之前运行。

因此您要绘制一个空白图表，然后向数据表中添加行。

尝试在$.getJSON内移动其余代码，
如下...

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(() => {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Bitcoin');

    $.getJSON('./data.php', (json) => {
        $.each(json, (key, value) => {
            data.addRows([
                [new Date(parseInt(value.timestamp)).getHours(), parseFloat(value.price)]
            ]);
        });

        var options = {
            hAxis: {
                title: 'Datum'
            },
            vAxis: {
                title: 'Prijs'
            },
            backgroundColor: '#fff'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
});

Google Charts API使Chart保持白色

1 个答案: