Диаграмма остается белой с Google Charts API - PullRequest
Новая
       20

Диаграмма остается белой с Google Charts API

0 голосов
/ 05 ноября 2018

Попытка заполнить диаграмму, которая получает информацию из другого файла через запрос 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);
    });

Изображение диаграммы

1 Ответ

0 голосов
/ 05 ноября 2018

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