使用Chart.js和AJAX创建和更新折线图时，CPU的使用速度非常慢

Question

我正在尝试使用Chart.js创建折线图，使用AJAX每秒更新一次。我是JavaScript的新手。

我遇到了一些问题，我的主要问题是如何使用我的数据库中的20个样本初始化myNewChart.Line(data, options);，然后使用myNewChart.addData(data.datasets[0].data, data.labels);，只需每秒向图表添加一个样本。我同时调用了AJAX调用的成功函数。

现在我有了它的工作，但我确信有一个更好的方法来做它，因为它很慢，我可以看到CPU使用率上升，如果我试图改变大小的话，甚至更多窗口。

以下是代码：

function get_data() {
    if (data === undefined){
        $.ajax({
            type: 'GET',
            url: '/stream/20',
            dataType: 'json',
            success: function (response) {
                console.log(response);
                time = response.labels.map(function (x) {return moment(x).format('HH:mm:ss');});
                data = {
                    labels : time.reverse(),
                    datasets : [{data : response.DataSets.reverse()}]
                };
                window.myNewChart = myNewChart.Line(data, options);
            }
        });               
   }else{
        $.ajax({
            type: 'GET',
            url: '/stream/1',
            dataType: 'json',
            success: function (response) {
                console.log(response);
                time = response.labels.map(function (x) {return moment(x).format('HH:mm:ss');});
                data = {
                    labels : time,
                    datasets : [{data : response.DataSets}]
                };
                console.log(data.datasets[0].data, data.labels);
                myNewChart.addData(data.datasets[0].data, data.labels);
                myNewChart.removeData();
            }
        });  
    }
}

var data;

var ctx = $('#chart').get(0).getContext("2d");

var myNewChart = new Chart(ctx);

var options = { animation: false,
                responsive: true,
                pointDot : false,
                datasetFill : false,
                scaleShowGridLines : false,
                showTooltips: false
};

$(document).ready(function(){

    setInterval(function(){ get_data(); }, 1000);

});