flot多图不要缩放

Question

现在我正在使用flot绘制图表。问题是当只有一个图表时，一切正常。但是当有多个图表并且我缩放时。它只缩放第一秒，一个消失。我也有复选框，我可以在图表之间选择，当我只选择第二个，然后缩放不起作用。但如果我只选择第一个，那么每件事都很好。似乎缩放仅适用于第一个图形。当两个图形都存在时，只有第一个缩放第二个完全消失

这是我的代码

 $(function() {
var datasets = new Array();
var data=[]
var optionsOverview = {
        legend: {show: false},
        series: {lines: {show: true,lineWidth: 1},shadowSize: 0},
        xaxis: {ticks: 5},
        yaxis: {ticks: 6},
        grid: {color: "#999"},
        selection: {mode: "xy"}
        }
var optionsDetail={
        yaxis: {axisLabel: "Voltage"},
        xaxis: {axisLabel: "Time in nano seconds"}, 
        points: {show: true}, 
        lines: {show: true,fill: false}, 
        grid: { hoverable: true, clickable: true,color: "#999" }, 
        selection: { mode: "xy" },
        legend: {
                noColumns: 0,
                labelFormatter: function (label, series) {
                    return "<font color=\"white\">" + label + "</font>";
                },           
                backgroundColor: "#000",
                backgroundOpacity: 0.9,
                labelBoxBorderColor: "#000000",
                position: "ne"
                }
        }
    drawPlot();


    function drawPlot()
    {
        $.getJSON("test.json", function(json) { //test.json is the file which contains my data in json format
            datasets = json;
        //console.log(datasets);
        var i = 0;
        $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
        });

        // insert checkboxes 
        $("#resultChoices").empty();
        var plotDetail=null;
        var overview=null;

        var choiceContainer = $("#resultChoices");
        $.each(datasets, function(key, val) {
            choiceContainer.append("<br/><input type='checkbox' name='" + key +
                "' checked='checked' id='id" + key + "'></input>" +
                "<label for='id" + key + "'>"
                + val.label + "</label>");
        });

        choiceContainer.find("input").click(plotAccordingToChoices);
        $("#httpStatus").find("input").click(plotAccordingToChoices); //find the button inside the main div and detect the click to plot everything

        function plotAccordingToChoices() 
        {
            data = [];
            choiceContainer.find("input:checked").each(function () {
                var key = $(this).attr("name");
                if (key && datasets[key]) 
                {
                    data.push(datasets[key]);
                }
            });
                //if (data.length > 0) {
                plotDetail=$.plot("#resultHolder", data, optionsDetail);
                // Create the overview plot
                overview = $.plot("#resultOverview", data, optionsOverview);
        }       
        // now connect the two
        $("#resultHolder").bind("plotselected", function (event, ranges) {
            //console.log(ranges);
            // clamp the zooming to prevent eternal zoom
            if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
                ranges.xaxis.to = ranges.xaxis.from + 0.00001;
            }
            if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
                ranges.yaxis.to = ranges.yaxis.from + 0.00001;
            }
            // do the zooming
            plotDetail = $.plot("#resultHolder", data,
                $.extend(true, {}, optionsDetail, {
                    xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                    yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to },

                })
            );
            // don't fire event on the overview to prevent eternal loop

            overview.setSelection(ranges, true);
        });
            $("#resultOverview").bind("plotselected", function (event, ranges) {
            plotDetail.setSelection(ranges);
        }); 
        //connect the two until here


        plotAccordingToChoices();

        // add some hovering logic to each point...
             var previousPoint = null;
            $("#resultHolder").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x);
                $("#y").text(pos.y);
                if ($("#resultTooltipEnable:checked").length > 0) {
                    if (item) {
                        if (previousPoint != item.datapoint) {
                            previousPoint = item.datapoint;
                            $("#tooltip").remove();
                            var x = item.datapoint[0], y = item.datapoint[1];
                            showTooltip(item.pageX, item.pageY, item.series.label + " at " +x +" ns"+ " is " + y);
                        }
                    } 
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;            
                    }
            } });

            // show the tooltip
            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css( {
                    position: 'absolute',
                    display: 'none',
                    top: y - 35,
                    left: x + 5,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#fee',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }
            // Tooltips code until here

        });
    }
}); 

任何人都可以指出我正在犯的错误......