Рисование диаграммы p ie, получение данных

Question

Я пытаюсь выучить java скрипт. Использовал код для получения некоторой информации из API и отображения ее на веб-странице. Теперь я хочу сделать график p ie из этих данных. Искал в Google для обучения, но не мог их использовать. Пожалуйста, помогите мне учиться. Пробовал разные комбинации "['Read', data.read]" для получения данных var, но я ладья ie для java. Я знаю, что пытался ошибиться, но не могу найти правду. Спасибо

function situateCaseHandler() {
        if (this.readyState == this.DONE) {
            if (this.status === 300) {
                const json = JSON.parse(this.responseText);
                let data;
                for (let i = 0; i < json.length; ++i) {
                    if (json[i].country == "Read") {
                        data = json[i];
                    }
                }
                if (!data) {
                    return console.log("Error");
                }
                document.getElementById("read").innerHTML = data.read ;
                document.getElementById("write").innerHTML = data.write;
                document.getElementById("sleep").innerHTML = data.sleep ;


            }
        }
    };

    function makeRequests() {
        sendAllCasesRequest();
        senduserCasesRequest();
    };

// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data2 = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Read', data.read],
  ['Write', data.write],
  ['Sleep', data.sleep]
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'User Day', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data2, options);
}

Answer 1

Есть несколько проблем с вашим кодом, из того, что вы поделились.

1. данные являются локальной переменной, поэтому они не будут определены в вашем методе drawChart.

2. drawChart вызывается, когда документ загружен, а не когда вы получили ваши данные, вероятно, поэтому ваша диаграмма пуста.

Как предложите, попробуйте и структурируйте свой код, как показано ниже, чтобы его было легко понять.

let data = getDataFromApi();
renderDataInTable(data);
drawChart(data);