jQuery Flot无法使用Ajax调用进行渲染

Question

我正在制作一个网站页面，该页面每300毫秒更新一次数据。 为此，我在jQuery中使用了Ajax调用。 我正在使用jQuery flot渲染图形，但是当我想要实时渲染（如在库示例中）时遇到了一个问题。

这是我的代码：

    var i = 0;
    var datapoints = [];
    var options = {
        lines: {
            show: true
        },
        points: {
            show: true
        },yaxis: {
            min: 40,
            max: 60
        },
        xaxis: {
            show : false
        }
    };
    var plot;
    $(document).ready(function () {
        plot = $.plot("#placeholderplot", [[]], options);
    });
    function loadMesures() {
        setTimeout(loadMesures, 300);
        $.getJSON('http://myurl/', function (data) {
                freq = data.FREQUENCE;
                i++;
                datapoints.push([i, freq])
                plot.setData([datapoints]);
                plot.draw();
                //$.plot("#placeholderplot", [datapoints], options);
        });
    }

当我用“ $ .plot（”＃placeholderplot“，[datapoints]，options）;重新初始化图时，”我的图呈现完美，但是当我使用SetData并绘制时，什么也没有发生。

任何想法？

Answer 1

您不能仅使用需要首先获取数据并使用该数组设置data属性的数组来调用集合数据。 另外，您需要调用设置网格，以便可以重新计算xaxis。

所以试试这个：

i++;
datapoints.push([i, freq]);
var temp = plot.getData();    
temp[0].data = datapoints;
plot.setData(temp);
plot.setupGrid();
plot.draw();

在这里摆弄

另外，除非您确实需要保留对数据数组的外部引用，否则也可以这样做：

var temp = plot.getData();    
temp[0].data.push([i, freq]);
plot.setData(temp);

另一件事，如果您需要重新计算xaxis（例如，它不是固定的），则调用setData，setupGrid和draw与重新初始化flot基本相同。 如果我错了，请有人纠正我（以前的版本中曾经有内存泄漏，但我认为最新版本中已解决）。