Как обновить только новые данные в Chart.JS?

Question

На самом деле после нажатия кнопки на моем веб-сайте я вызываю модал начальной загрузки, внутри которого есть 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 этой функции все данные диаграммы обновляются

Хотя я быобновлять только новые данные , поэтому если у меня есть построение диаграммы как labels ["15:00","16:00"] datasets [5,8], когда новые данные были добавлены в базу данных как 17: 00/9 , я быдобавить только новое значение или другой пример, если данные за 15:00 изменились на 10, я бы обновил только значение, указанное в метке 15: 00.

Answer 1

Да, вы можете обновить обе вещи

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

здесь работает пример