Question

我有一个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_info将内存使用量存储在RAM中。

当我点击#chartButton时，AJAX调用发生在具有巨大功能的aftercharting上。由于它是异步通话，因此我在callCharts()之后立即呼叫setInterval。 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()函数做了类似的工作，等待它。

修改

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

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

但它还没有奏效。请帮忙！

CanvasJS图表没有使用AJAX回调值更新

0 个答案: