javascript - 使用 Google Charts API 使图表保持白色

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);
    });
});