javascript - 如何仅更新 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 poll所有图表数据都会更新

虽然我会仅更新新数据，但如果我将图表构建为标签[“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();
           }
       });
   

这里正在工作example