javascript - 无法在 Flotcharts 中使用两个 "data series"(实时示例)

Question

我只是跟着导师(以及“StackOverfklow”的帖子)创建2行系列in this real-time graphics example ，但是这两行似乎使用完全相同的数据...

我就是不知道我做错了什么......这是我的调整(它们是 -> getRandomData2):

$(function() {
    // info for graph2
    instant=1;
    high=-45;
    frequency=3;

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {

        if (data.length > 0)
            data = data.slice(1);

        // Do a random walk

        while (data.length < totalPoints) {

            var prev = data.length > 0 ? data[data.length - 1] : 50,
                y = prev + Math.random() * 10 - 5;

            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }

            data.push(y);
        }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    function getRandomData2() {
        if (data.length > 0)
            data = data.slice(1);

            while (data.length < totalPoints) {

                instant=instant-frequency;
                if (instant<high ){instant=(high*-1);}

                instantShow=instant;
                if(instantShow<20){instantShow=20;}


                data.push(instantShow);
            }       



        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget
    var updateInterval = 30;
    $("#updateInterval").val(updateInterval).change(function () {
        var v = $(this).val();
        if (v && !isNaN(+v)) {
            updateInterval = +v;
            if (updateInterval < 1) {
                updateInterval = 1;
            } else if (updateInterval > 2000) {
                updateInterval = 2000;
            }
            $(this).val("" + updateInterval);
        }
    });
    //  var plot = $.plot("#placeholder", [ getRandomData() ], {
    var plot = $.plot("#placeholder", [{ data: getRandomData()},{ data: getRandomData2()}], {

        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });  

//  function update() { plot.setData([getRandomData()]);
    function update() { plot.setData([{data:getRandomData()},{ data:getRandomData2()} ]);
         plot.draw(); 
         setTimeout(update, 25); 
    }

    update();

    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

感谢所有支持/提示!

Answer 1

问题在于，在您的 getRandomData() 和 getRandomData2() 中，您正在处理相同的变量 data，因此一个函数会覆盖对方的影响。解决方案是简单地将它们分开:

// We use an inline data source in the example, usually data would
// be fetched from a server

var data1        = [],
    data2        = [],
    totalPoints = 300;

并在相应的函数中使用它们:

function getRandomData() {
    if (data1.length > 0)
        data1 = data1.slice(1);

    // Do a random walk
    while (data1.length < totalPoints) {
        var prev = data1.length > 0 ? data1[data1.length - 1] : 50,
            y    = prev + Math.random() * 10 - 5;

        if (y < 0) {
            y = 0;
        } else if (y > 100) {
            y = 100;
        }

        data1.push(y);
    }

    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data1.length; ++i) {
        res.push([i, data1[i]])
    }

    return res;
}

function getRandomData2() {
    if (data2.length > 0)
        data2 = data2.slice(1);

    while (data2.length < totalPoints) {
        instant = instant - frequency;
        if (instant < high) {
            instant = (high * -1);
        }

        instantShow = instant;
        if (instantShow < 20) {
            instantShow = 20;
        }

        data2.push(instantShow);
    }

    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data2.length; ++i) {
        res.push([i, data2[i]])
    }

    return res;
}

然后你可以看到两行:fiddle .