Javascript CanvasJS图表未使用AJAX回调值更新

我有一个Django应用程序，可以计算视图中的CPU使用率、内存使用率和其他一些统计数据。从另一个角度看，我有一个巨大的功能，需要几分钟才能完成。我想在函数执行时绘制不断变化的CPU统计数据，也就是说，在函数执行时，我定期对CPU统计数据视图进行AJAX调用，并使用新的CPU统计数据参数更新CanvasJS数据点以更新图表

以下是用于绘制图表的JavaScript-

var dataPoints = [];

var cpu = 0;
var mem = 0;
var mem_info = 0;

var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Machine Stats"
                },
                data: [{
                    type: "column",
                    dataPoints: dataPoints
                }]
            });

function callCharts() {
    $.ajax({
        url: 'charting/',
        success: function(data, textStatus, jqXHR) {
            cpu = data.cpu;
            mem = data.mem;
            mem_info = data.mem_info;

            dps = [{x: 10, y: cpu, label: "CPU %"}, 
                               {x: 20, y: mem, label: "Memory %"}, 
                               {x: 30, y: mem_info, label: "Memory in MB"}, 
                               //{x: 40, y: }
                               ];

            dataPoints.push(dps);
            chart.render();
        }
    });
}

$('#chartbutton').on("click", function(event) {
    $.ajax({
        url: 'aftercharting/',
        success: function(data, textStatus, jqXHR) {
            clearInterval(intervalID);
        }
    });

    var intervalID = setInterval(function() {callCharts();}, 1000);

});

cpu

存储cpu使用率%，

mem

存储内存使用率%，

mem\u info

将内存使用率存储在RAM中

当我点击

#chart按钮

，一个AJAX调用发生在

aftercharting

上，它具有巨大的功能。因为这是一个异步调用，所以我在

setInterval

中紧接着调用

callCharts（）

callCharts（）

然后定期对

charting

进行AJAX调用，以获取新的CPU统计数据，并使用它们更新数据点。但它似乎不起作用

我得到的是一个空白图表，其中只有X轴填充了一些值，这些值在AJAX调用

\charting

后更新

如果需要，以下是两个Django视图-

def charting(request):
    cpu, mem, cpu_time, mem_info = getPythonProgSystemInfo()
    return HttpResponse(json.dumps({'cpu': cpu, 'mem': mem, 'cpu_time': cpu_time, 'mem_info': mem_info}))

def aftercharting(request):
    sleep(5)
    return HttpResponse("from django, but should come after")

现在，

aftercharting\

没有那么大的程序，但是

sleep（）

函数做了类似的工作，让它等待

编辑：

我查过了，这是我的更新代码-

var dataPoints = [];
var intervalID = 0;
var chart = 0;

var cpu = 0;
var mem = 0;
var mem_info = 0;

function updateChart() {
    $.ajax({
        url: 'charting/',
        success: function(data, textStatus, jqXHR) {
            dataPoints.push({x: 10, y: cpu, label: 'CPU %'});
            dataPoints.push({x: 10, y: mem, label: 'Memory %'});
            dataPoints.push({x: 30, y: mem_info, label: 'Memory in MB'});
            chart.render();
            intervalID = setInterval(function() {updateChart();}, 1000);
        }
    });
}

function callChart() {
    $.ajax({
        url: 'charting/',
        success: function(data, textStatus, jqXHR) {
            cpu = data.cpu;
            mem = data.mem;
            mem_info = data.mem_info;

            dps = [{x: 10, y: cpu, label: "CPU %"}, 
                              {x: 20, y: mem, label: "Memory %"}, 
                              {x: 30, y: mem_info, label: "Memory in MB"}, 
                              //{x: 40, y: }
                              ];

                chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Machine Stats"
                },
                data: [{
                    type: "column",
                    dataPoints: dps
                }]
            });
            chart.render();
            updateChart();
        }, 
    });
}

$('#chartbutton').on("click", function(event) {
    $.ajax({
        url: 'aftercharting/',
        success: function(data, textStatus, jqXHR) {
            clearInterval(intervalID);
        },
    });
    callChart();
});

---

但它仍然不起作用。请帮忙

你确定从django返回的数据正确吗？@dentemm-我已经编辑了我的代码，所以你可以看到我的django视图

charting（）

返回一个JSON对象，因此格式正确。即使根据

getPythonProgSystemInfo（）

计算的CPU百分比不正确，它们也必须是一些值，这些值应填充图表。此外，我已经通过控制台检查了这些值是否正确。