Chart.js и асинхронная загрузка

Я попытался еще раз ухватиться за JS и решил начать экспериментировать с chart.js, чтобы визуализировать некоторые данные.

Это то, что я скопировал и подправил на данный момент:

const label =[];
const cases = [];

fetch('https://rki.marlon-lueckert.de/api/states')
    .then(response => {
      if (response.ok) return response.json();
      throw new Error(response.statusText)  // throw an error if there's something wrong with the response
    })
    .then(function handleData(data) {
      for (var i=0; i<data.states.length; i++) {
        label.push(data.states[i].name)
        cases.push(data.states[i].count)
        console.info(data.states[i].name)
        console.info(data.states[i].count)
      }
    });

chartIt();
async function chartIt() {
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: label,
        datasets: [{
            label: 'Covid-19 cases',
            data: cases,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
}

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Charts</title>
    <canvas id = "myChart"></canvas>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity = "sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw= = " crossorigin = "anonymous"></script>
    <script src = "chartData.js"></script>
</head>
<body>
    <div class = "chart" style = "position: relative; height:80vh; width:100vw">
      
    </div>
</body>
</html>

Данные отображаются корректно, но только после изменения размера страницы. Я подумал, что это связано с асинхронными функциями. Но я полностью потерян в отношении исправления этого.

Кроме того: не уверен, что делать с частью «при возникновении ошибки» в моей выборке данных, чтобы быть правдой.

javascript chart.js

23.12.2020 13:39

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 381

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вероятно, вам просто нужно установить диаграмму width и height на 100%. Я также удалил ведение журнала, чтобы вы могли четко видеть результаты. то есть

<div class = "chart" style = "position: relative; height:80vh; width:100vw"></div>

<div class = "chart" style = "height:100%; width:100%"></div>

Что касается кода ошибки, вам, вероятно, следует использовать catch в цепочке.

например

const label = [];
const cases = [];

fetch('https://rki.marlon-lueckert.de/api/states').then(response => {
    if (response.ok) return response.json();
    throw new Error(response.statusText) // throw an error if there's something wrong with the response
}).then(data => {
    for (var i = 0; i < data.states.length; i++) {
        label.push(data.states[i].name)
        cases.push(data.states[i].count)
    }
    chartIt();
}).catch(err => {
    console.error(err)
});

async function chartIt() {
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'Covid-19 cases',
                data: cases,
                backgroundColor: ['rgba(255, 99, 132, 0.2)'],
                borderColor: ['rgba(255, 99, 132, 1)'],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
}

<!DOCTYPE html>
<html>
<head>
    <title>Covid-19 Charts</title>
    <canvas id = "myChart"></canvas>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity = "sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw= = " crossorigin = "anonymous"></script>
    <script src = "chartData.js"></script>
</head>
<body>
    <div class = "chart" style = "height:100%; width:100%">
    </div>
</body>
</html>

Но это не устраняет проблему отображения данных только после изменения размера страницы. Я думаю, что это основано на некоторой проблеме, связанной с тем, что данные обрабатываются после рендеринга DOM, и для отображения правильных данных необходимо «повторно рендерить».

— 23.12.2020 13:54

Ах, хорошо, просто переместите вызов chartIt() в функционал fetch, чтобы он вызывался после успешной загрузки данных. см. мою правку.

— 23.12.2020 13:57

23.12.2020 13:50