javascript - 实时流程图不适用于 JSON

Question

我正在使用此处给出的实时图表:http://www.flotcharts.org/flot/examples/realtime/index.html

我尝试用 JSON 文件中的输入值替换随机数学生成代码。它绘制一个空白图表。无法找出问题，因为它看起来逻辑上是正确的。请帮忙。

这是脚本:

<script type="text/javascript">

$(function() {

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

    var dat = [];
        //totalPoints = 300;

    function getRandomData() {
        //alert("fff");
        if (dat.length > 0)
            dat = dat.slice(1);

        // Do a random walk

        //while (dat.length < totalPoints) {

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

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

            //dat.push(y);

        $.getJSON('data_3.json', function(data) {
        alert(data+"i m here");
                for (var i in data.nums) {
                    output = data.nums[i];
                    dat.push(output);
                    }
        });

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < dat.length; ++i) {
            res.push([i, dat[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() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();

    // Add the Flot version string to the footer

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

</script> 

这是 JSON 数据，data_3.json:

{
"label": "FLOT",
"nums":[ 
    0.8446, 0.8445, 0.8444, 0.8451,    0.8418, 0.8264,    0.8258, 0.8232,    0.8233, 0.8258,
    0.8283, 0.8278, 0.8256, 0.8292,    0.8239, 0.8239,    0.8245, 0.8265,    0.8261, 0.8269,
    0.8273, 0.8244, 0.8244, 0.8172,    0.8139, 0.8146,    0.8164, 0.82,    0.8269, 0.8269,
    0.8269, 0.8258, 0.8247, 0.8286,    0.8289, 0.8316,    0.832, 0.8333,    0.8352, 0.8357,
    0.8355, 0.8354, 0.8403, 0.8403,    0.8406, 0.8403,    0.8396, 0.8418,    0.8409, 0.8384,
    0.8386, 0.8372, 0.839, 0.84, 0.8389, 0.84, 0.8423, 0.8423, 0.8435, 0.8422,
    0.838, 0.8373, 0.8316, 0.8303,    0.8303, 0.8302,    0.8369, 0.84, 0.8385, 0.84,
    0.8401, 0.8402, 0.8381, 0.8351,    0.8314, 0.8273,    0.8213, 0.8207,    0.8207, 0.8215,
    0.8242, 0.8273, 0.8301, 0.8346,    0.8312, 0.8312,    0.8312, 0.8306,    0.8327, 0.8282,
    0.824, 0.8255, 0.8256, 0.8273, 0.8209, 0.8151, 0.8149, 0.8213, 0.8273, 0.8273,
    0.8261, 0.8252, 0.824, 0.8262, 0.8258, 0.8261, 0.826, 0.8199, 0.8153, 0.8097,
    0.8101, 0.8119, 0.8107, 0.8105,    0.8084, 0.8069,    0.8047, 0.8023,    0.7965, 0.7919,
    0.7921, 0.7922, 0.7934, 0.7918,    0.7915, 0.787, 0.7861, 0.7861, 0.7853, 0.7867,
    0.7827, 0.7834, 0.7766, 0.7751, 0.7739, 0.7767, 0.7802, 0.7788, 0.7828, 0.7816,
    0.7829, 0.783, 0.7829, 0.7781, 0.7811, 0.7831, 0.7826, 0.7855, 0.7855, 0.7845
] }

Answer 1

我认为问题在于您异步获取数据，但继续执行代码，就好像数据已经存在一样。

当您进入getRandomData时，您将删除(几乎)所有点。然后，您可以使用 $.getJSON 异步获取新数据。您尝试填充 res，但您的 $.getJSON 的结果可能还不存在。

在填充 res 进行检查时插入断点/调试器。

尽量不要通过删除此代码来清空您的 dat 变量

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