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

Question

实际上是在按下我网站上的一个按钮后，我调用了一个引导模式，在该模式中有一个Chart.JS，该Chart的数据是通过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 所有图表数据都已更新

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

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

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

1. 带有新数据点的新标签

2. 更新现有数据点

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

Answer 1

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