在 chart.js 中更新答案

【问题标题】：Updating in chart.js在 chart.js 中更新
【发布时间】：2020-04-10 18:24:48
【问题描述】：

我正在尝试弄清楚如何更新 chart.js 图表。谷歌返回了很多答案，我认为有些已经过时了，因为我似乎无法让任何解决方案发挥作用。文档页面说只使用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();

【问题讨论】：

请添加一个最小的工作代码示例-stackoverflow.com/help/minimal-reproducible-example。（添加sn-p）。 stackoverflow.blog/2014/09/16/…

标签： javascript chart.js chart.js2

【解决方案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();
}

【讨论】：