更新 chart.js

Question

我正在研究如何更新 chart.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

您访问 renderChart.data.datasets 的 reload 函数存在问题。请注意 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();
}

更新 chart.js

Updating in chart.js

javascript

chart.js

chart.js2