如何仅更新 Chart.JS 中的新数据？答案

【问题标题】：How to update only new data in Chart.JS?如何仅更新 Chart.JS 中的新数据？
【发布时间】：2020-02-07 13:25:09
【问题描述】：

实际上，在我的网站中按下按钮后，我调用了一个引导模式，其中有一个 Chart.JS，该图表的数据是通过以下方式从 Ajax 调用加载的

function loadReports(data) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/getReports",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ data: data }),
        dataType: "json",
        success: function (r) {
            data = r.d;
            if (data != '[]') {
                data = jQuery.parseJSON(data);
                var dataObject = {
                    labels: data.map(ora => ora.ORARIO),
                    datasets: [{
                        label: 'Coperti',
                        backgroundColor: gradient,
                        hoverBackgroundColor: gradient,
                        data: data.map(cop => cop.COPERTI)
                    }]          
                };
                chart.data = dataObject;
                chart.update(0);
            } else {
                var dataObject = {
                    labels: [],
                    datasets: []
                }
                chart.data = dataObject;
                chart.update();
            }

        },
        error: function (error) {
            alert(error.responseText);
        }
    });

}

现在我会“实时更新”该图表，但问题显然是通过执行该功能的ajax poll所有图表数据都已更新

虽然我会只更新新数据，所以如果我有一个图表构建为labels ["15:00","16:00"]datasets [5,8]，当新数据已添加到数据库中时，17:00 / 9 如果 15:00 的数据已更改为 10，我将仅添加新值或另一个示例，我将仅更新标签 15:00 中设置的值。

【问题讨论】：

标签： javascript jquery ajax chart.js

【解决方案1】：

是的，您可以同时更新这两件事

带有新数据点的新标签

更新现有数据点

document.getElementById('addData').addEventListener('click', function() {
        if (config.data.datasets.length > 0) {
            var month = MONTHS[config.data.labels.length % MONTHS.length];
            config.data.labels.push(month);

            config.data.datasets.forEach(function(dataset) {
                dataset.data.push(randomScalingFactor());
            });

            window.myLine.update();
        }
    });
            document.getElementById('updateOnlyPoint').addEventListener('click', function() {
        if (config.data.datasets.length > 0) {
            var month = config.data.labels.indexOf("March");//change point
            var olddata=config.data.datasets[0].data
             olddata[month]=randomScalingFactor(); //new data
            window.myLine.update();
        }
    });

这里正在工作example

【讨论】：