使用jquery ajax请求进行绘制

时间:2013-08-26 01:09:46

标签: jquery flot

我有一个情节,我正在创建一切都很好,除非我点击按钮它为我的数据生成行。如果我再次点击按钮,它只会写入第一个ajax请求,而不是从头开始,这就是我想要的。请帮助这是我的ajax电话。

 $('#process').click(function(e) {

    var market = '&market=' + $('#market').val();
    var productgroup = '&productgroup=' + $('#curve').val();
    var from = '&from=' + $('#date_from').val();
    var to = '&to=' + $('#date_to').val();
    var lookback = '&lookback=' + $('.timeframe').attr('id');
    var fullUrl = url + market + productgroup + from + to + lookback;
    e.preventDefault();

        $.ajax({

            url: fullUrl,
            type: "GET",
            dataType: "json",
            success: onDataReceived,
            error: onError//,
            // data: data
        });

});

这是我的情节选项

  var options = {
    series: {
        lines: {
            show: true,
            lineWidth: .1
        },
        points: {
            show: false
        }
    },
    xaxis: {
        mode: "time",
        minTickSize: [1, "day"],
        timeformat: "%m/%d/%Y",
        panRange: timespan
    },
    yaxis: {
        mode: "money",
        tickDecimals: 2,
        panRange: [0, 100],
        tickFormatter: dollarFormatter
    },
    zoom: {
        interactive: true
    },
    pan: {
        interactive: true
    }
};

这是创建情节的功能

var data = [];

$.plot("#placeholder", data, options);

这是我的onDataReceived函数

 function onDataReceived(series) {

    // Push the new data onto our existing data array
    var count = 0;
    for(var prop in series) {
        if(series.hasOwnProperty(prop))
            ++count;
    }
    for(i=0;i<count;i++)
    {
        if (!alreadyFetched[series[i].label]) {

            data.push(series[i]);
        }
    }

    $.plot("#placeholder", data, options);
}

1 个答案:

答案 0 :(得分:2)

https://github.com/flot/flot/blob/master/API.md#plot-methods

根据API,您可能希望使用setData()和draw()来重绘

var data = [];
var plot = $.plot("#placeholder", data, options);

然后在onDataRecieved

plot.setData(data);
plot.draw();

而不是在占位符上重新创建flot