如何只更新Chart.js中的新数据？

Question

实际上，在按下我网站中的一个按钮后，我调用了一个引导模式，其中有一个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轮询来更新所有图表数据

虽然我将只更新新数据，因此如果我有一个图表构建为标签[“15:00”,“16:00”]数据集[5,8]当一个新数据已添加到数据库为17:00/9时，我将只添加新值，或者另一个例子，如果15:00的数据已更改为10，我将只更新标签15:00中设置的值。

Answer 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();
        }
    });

下面是工作示例