Rickshaw图中不更新的实时图

Question

生成图的代码如下所示：

var allVenues = [];
var seriesData = [];

var callGraph = function () {
    var where = jQuery('#hdnVal').val();
    jQuery.ajax({
           url: "PopulateTable",
           type: 'GET',
           data: {
                 'where': where
           },
           dataType: "json",
           async: false,
           success: function (responseJson) {
                  if (responseJson != null) {
                     jQuery.each(responseJson, function (key, value) {
                            jQuery('#hdnVal').val(value['date']);
                     });
                     allVenues.push(responseJson);
                  }
              }
     });
     var length = 0;
     var length1 = 0;

     var dataXY = [];

     var dataX = [];
     length = allVenues.length;
     for (var i = 0; i < length; i++) {
         length1 = allVenues[i].length;
         for (var j = 0; j < length1; j++) {
             dataX.push([returnTimestamp(allVenues[i][j].date), returnDate(allVenues[i][j].date)]);
             dataXY.push({x: returnTimestamp(allVenues[i][j].date), y: allVenues[i][j].price});
         }
     }
     seriesData = [dataXY];
} ;
callGraph() ;
var palette = new Rickshaw.Color.Palette({scheme: 'classic9'});
var graph = new Rickshaw.Graph({
   element: document.getElementById("chart"),
   width: 900,
   height: 500,
   renderer: 'area',
   stroke: true,
   preserve: true,
   series: [
     {
        color: palette.color(),
        data: seriesData[0],
        name: 'Price'
     }
   ]
});
graph.render();

setInterval(function () {
   callGraph();
   graph.series.addData(seriesData);
   graph.render();
}, 5000);

在这段代码中，我的"seriesData“数组正在更新，但图形没有更新。生成的json数组在页面加载时对图很好，但是当我应用间隔时，图就不更新了。

Answer 1

在没有像样的Rickshaw文档，也没有异步更新的例子的情况下，很难说什么会起作用，什么不起作用。

似乎没有必要维护allVenues数组，除非您希望在每次更新时从头开始重建图形。添加到系列数据并调用.render()就足够了。

你可能想要这样的东西：

(function() { // IIFE to isolate from the Global name space, if not otherwise wrapped.
    var jqXHR;
    var errors = {
        count = 0,
        threshold: 10 // number of consecutive error after which the update cycle should die
    }
    var palette = new Rickshaw.Color.Palette({ scheme: 'classic9' });
    var lastDate = jQuery('#hdnVal').val();
    var seriesData = []; // <<<<<<<<<<<< add
    var graph = new Rickshaw.Graph({
        element: document.getElementById('chart'),
        width: 900,
        height: 500,
        renderer: 'area',
        stroke: true,
        preserve: true,
        series: [{
            color: palette.color(),
            data: seriesData, // <<<<<<<<<<<< change
            name: 'Price'
        }];
    });

    var callGraph = function (val) {
        if(jqXHR) {
            // In case previous ajax has not responded.
            jqXHR.abort(); // Abort previous ajax and force its error handler to fire.
            return; // Allow the error handler to report the abort error then retry/die.
        }
        jqXHR = jQuery.ajax({
            url: "PopulateTable",
            type: 'GET',
            data: { 'where': val },
            dataType: "json"
        }).then(function (responseJson) { // ajax success handler
            if (responseJson) {
                // Here's the major guess!
                // ***** start: delete *****
                // graph.series.addData(responseJson.map(function(item) {
                    // lastDate = item.date;
                    // return { x: returnTimestamp(item.date), y: item.price };
                // }));
                // ***** end: delete *****

                // ***** start: add *****
                responseJson.forEach(function(item) {
                    lastDate = item.date;
                    seriesData.push({ x: returnTimestamp(item.date), y: item.price });
                });
                // ***** end: add *****
            }
            graph.render();
            errors.count = 0; //reset errorCount
            setTimeout(function() {
                callGraph(lastDate);
            }, 5000);
        }, function(jqXHR, textStatus, errorThrown) { // ajax error handler
            errors.count += 1;
            console.log("callGraph()", textStatus, "errorCount: " + errorCount);
            if(error.count < errors.threshold) {
                setTimeout(function() {
                    callGraph(lastDate); // retry with same lastDate as previous ajax call.
                }, 5000);
            } else {
                // Allow the update cycle to die
                console.log("callGraph() errorTheshold reached");
            }
        });
    };

    callGraph(lastDate);
})();

注意，由于AJAX的异步性，在AJAX成功处理程序中更新图形并刺激更新周期的下一阶段。setTimeout()被用来代替setInterval()，而setInterval()在扼杀循环时更麻烦。

如果它仍然不能工作，那么graph.series.addData(...)部分可能是错误的。它可能只需要调试，但也可以尝试以下两种建议-- https://stackoverflow.com/a/19126145/3478010