Обновление в графике. js

Question

Я пытаюсь выяснить, как обновить график. js график. Google вернулся с большим количеством ответов, и я думаю, что некоторые из них устарели, потому что я не могу заставить работать какие-либо решения. На странице документации написано, что просто используйте chartname.update(), но у меня это не работает. Я уже проверил консоль, чтобы убедиться, что объект диаграммы обновлялся. По какой-то причине сам график на странице просто не меняется.

let chartContainer = document.getElementById('charts');
let overview = {
    create: function () {
        let chartCanvas = document.createElement('canvas');
        chartCanvas.id = 'overviewChart';
        chartCanvas.appendChild(document.createTextNode('test'));
        chartContainer.appendChild(chartCanvas);
        let overviewChart = document.getElementById('overviewChart').getContext('2d');
        renderChart = new Chart(overviewChart, {
            type: 'bar',
            data: {
                labels:subjectList,
                datasets: [{
                    barThickness: 'flex',
                    label: 'Completed Credits',
                    data: []
                }]
            },
            options: {

            }
        })
    },
    reload: function() {
        console.log('reloaded overview chart');
        renderChart.data.datasets.data = [];
        for (subject in classes) {
            console.log('adding: ' + classes[subject].count)
            renderChart.data.datasets.data.push(classes[subject].count);
        }
        renderChart.update();
    }
}

function reloadCharts() {
    overview.reload();
}

overview.create();

Answer 1

В вашей функции reload есть проблемы с доступом к renderChart.data.datasets. Обратите внимание, что renderChart.data.datasets является массивом. Поэтому вам необходимо внести следующие изменения:

reload: function() {
    // renderChart.data.datasets.data = []; // old
    renderChart.data.datasets[0].data = []; // new
    for (subject in classes) {
        console.log('adding: ' + classes[subject].count)
        // renderChart.data.datasets.data.push(classes[subject].count); // old
        renderChart.data.datasets[0].data.push(classes[subject].count); // new
    }
    renderChart.update();
}