绘图选择以控制多个图表

Question

我一直在尝试修改flot示例（http://www.flotcharts.org/flot/examples/zooming/）中的代码，以便根据选择（即更改xaxis.min和xaxis.max）重新绘制多个图表并保留它们所有相关的。

我不知道从哪里开始修改示例，欢迎任何建议或提示。

由于

更新修改后的代码帮助仍然需要帮助！

enter code here
$(function () {
var plots = [];
var placeholders = $(".flot");

var d1 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
    d1.push([i, Math.sin(i)]);
var data = [ d1 ];

var d2 = [];
for (var i = 0; i < Math.PI * 2; i += 0.25)
    d2.push([i, Math.cos(i)]);
var data2 = [ d2 ];

var options = {
    series: { lines: { show: true }, shadowSize: 0 },
    /*xaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
    yaxis: { zoomRange: [0.1, 10], panRange: [-10, 10] },
    zoom: {
        interactive: true
    },
    pan: {
        interactive: true
    }*/
    selection: { mode: "x"}
};

plots.push($.plot(placeholder, data, options));
plots.push($.plot(placeholder1, data2, options));

placeholders.bind("plotselected", function (event, plot) {
    var axes = plot.getAxes();
    for(var i=0; i< plots.length; i++) {
        plots[i].getOptions().xaxes.min = axes.xaxis.from;
        plots[i].getOptions().xaxes.max = axes.xaxis.to;
        //plots[i].getOptions().yaxes[0].min = axes.yaxis.min;
        //plots[i].getOptions().yaxes[0].max = axes.yaxis.max;
        plots[i].setupGrid();
        plots[i].draw();
        plots[i].clearSelection();
    }
    });

    });