Javascript flot多重图形不缩放

现在我正在使用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

        });
    }
}); 

$（函数（）{
var数据集=新数组（）；
var数据=[]
var选项概述={
图例：{show:false}，
系列：{lines:{show:true，线宽：1}，阴影大小：0}，
xaxis:{ticks:5}，
yaxis:{ticks:6}，
网格：{color:#999}，
选择：{模式：“xy”}
}
var期权详情={
yaxis:{axisLabel:“电压”}，
xaxis:{axisLabel:“时间单位为纳秒”}，
要点：{show:true}，
行：{show:true，fill:false}，
网格：{可悬停：真，可点击：真，颜色：#999“}，
选择：{模式：“xy”}，
图例：{
无列：0，
labelFormatter：函数（标签，系列）{
返回“+标签+”；
},           
背景色：“000”，
背景不透明度：0.9，
labelBoxBorderColor:#000000“，
位置：“ne”
}
}
绘图（）；
函数drawPlot（）
{
$.getJSON（“test.json”，function（json）{//test.json是包含json格式数据的文件
datasets=json；
//console.log（数据集）；
var i=0；
$。每个（数据集、函数（键、值）{
val.color=i；
++一,；
});
//插入复选框
$（“#结果选择”）.empty（）；
var plotDetail=null；
var-overview=null；
var choiceContainer=$（“#结果选择”）；
$。每个（数据集、函数（键、值）{
choiceContainer.append（“
”+
""
+val.label+“”）；
});
choiceContainer.find（“input”）。单击（根据选项绘制）；
$（“#httpStatus”）.find（“input”）.click（plotAccountingTochoices）；//找到主div中的按钮并检测单击以绘制所有内容
功能图根据目录（）绘制
{
数据=[]；
choiceContainer.find（“输入：选中”）。每个（函数（）{
var key=$（this.attr（“name”）；
if（键和数据集[键]）
{
数据推送（数据集[键]）；
}
});
//如果（data.length>0）{
plotDetail=$.plot（#resultHolder），数据，选项细节）；
//创建概览图
概述=$.plot（#resultOverview），数据，选项概述）；
}       
//现在将两者连接起来
$（“#resultHolder”）.bind（“plotselected”，函数（事件，范围）{
//控制台日志（范围）；
//钳制缩放以防止永久缩放
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；
}
//进行缩放
plotDetail=$.plot（#resultHolder），数据，
$.extend（true，{}，optionsDetail{
xaxis:{min:ranges.xaxis.from，max:ranges.xaxis.to}，
yaxis:{min:ranges.yaxis.from，max:ranges.yaxis.to}，
})
);
//不要在概览上触发事件，以防止永久循环
概述。设置选择（范围，真）；
});
$（“#resultOverview”）.bind（“plotselected”，函数（事件，范围）{
plotDetail.setSelection（范围）；
}); 
//把两者连接到这里
绘图依据目录（）；
//为每个点添加一些悬停逻辑。。。
var-previousPoint=null；
$（“#resultHolder”）.bind（“plothover”，函数（事件、位置、项目）{
$（“#x”）.text（pos.x）；
元（“#y”）。文本（pos.y）；
如果（$（“#resultooltipenable:选中”）.length>0）{
如果（项目）{
if（上一个点！=item.datapoint）{
previousPoint=item.datapoint；
$（“#工具提示”）.remove（）；
变量x=项.数据点[0]，y=项.数据点[1]；
showTooltip（item.pageX、item.pageY、item.series.label+“在”+x+“ns”+”处为“+y”）；
}
} 
否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
} });
//显示工具提示
函数显示工具提示（x、y、内容）{
$（''+内容+''）.css（{
位置：'绝对'，
显示：“无”，
上图：y-35，
左：x+5，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}
//在此之前的工具提示代码
});
}
}); 

---

任何人都可以指出我犯的错误吗…

你能为你的问题建立一个解决方案吗？正如@Raidri所说，fiddle请，这是一个直截了当的代码墙…@Raidri我如何在fiddle中添加flot插件你能解释一下吗，因为我是fiddle新手。如果在javascript文本区域或外部进行操作