Plot a new series on an already-rendered jquery flot graph

问题

I have a float graph that is already rendering one data series, i.e.

var plot = $.plot($('#placeholder'), [data1], options);

At a later point, I will receive some new data that I want to also plot on this same graph, as a separate data series. Is there a way I can just add this new data series to the existing graph, and not have to construct the whole graph again? That is, I want to avoid having to make another call like this:

var plot = $.plot($('#placeholder'), [data1, data2], options);

and instead make a call like this:

plot.addSeries([data2], option);

Thanks!

回答1:

@Black Box Operations has the general details quite well. There's some problems before the latest version (0.7) with memory leaks when you repeatedly call $.plot(...). Either upgrade to the latest version, or look into doing plot.setData(), plot.setupGrid() and plot.draw()

You can get the details of the setData, setupGrid, and draw methods from the API.txt

回答2:

Create an ajax call that pulls your information and sends it to a method capable of handling multiple graphs by resetting the graph's information. First, grab the element that holds your graph and store it in a variable, then create an ajax call that pulls the information you need to create your graph. On success, call resetGraph and pass it the information.

var dataview = $("#placeholder");
$.ajax({
    url: "index.php",
    data: "stuff&junk&things",
    method: 'GET',
    dataType: 'json',
    success: function(msg){
        resetGraph(msg.dataview, msg.data, msg.data_ticks, msg.)
    }
});

function resetGraph(dataview, data, data_ticks ){

    plot = $.plot(dataview, data, {
        points: { show: true, radius: 5 },
        xaxis: { ticks: data_ticks, tickSize: 7 },
        yaxis: {labelHeight: 2}
    });

}

Now when you need to change your graph, simply fire off a call to your script, grab the information, send it to resetGraph on success, and it will update accordingly.

来源：https://stackoverflow.com/questions/5455166/plot-a-new-series-on-an-already-rendered-jquery-flot-graph

标签

jquery

flot