Javascript flot图形，使用图例打开/关闭系列

我希望能够使用flot图形的图例来打开/关闭我的图形系列。我在flot站点上找到了这些示例，并使用API中的和Labelformatter构建了我现在拥有的。我可以在图例元素旁边放置复选框，并向其添加单击事件及其激发。但这会再次调用plot函数并重置我的复选框值。我已经包括了完整的jquery函数，抱歉，它有点长

<script id="source">
var jsonPath = "JsonPriceHistory/" + getParameterByName("CardId")



$(function () {
    $.getJSON(jsonPath, function (results) {

        results = [{ "label": "A", "data": [[1290115114240, 0.7000], [1289396258877, 0.7000], [1289394738247, 0.7000], [1288482602563, 0.7000], [1288479321830, 0.7000], [1288464257267, 0.7000], [1288463414413, 0.7000], [1268440264933, 1.0000], [1268434766653, 1.0000], [1268059707567, 1.0000], [1265934534340, 1.0000]] }, { "label": "B", "data": [[1290115102033, 6.0000], [1289395956947, 6.0000], [1289394743117, 6.0000], [1288482613967, 6.0000], [1288479332767, 6.0000], [1288464270420, 6.0000], [1288463427313, 6.0000], [1268440276413, 6.0000], [1268434778203, 6.0000], [1268059732683, 6.0000], [1265934545390, 6.0000]] }, { "label": "C", "data": [[1290115034640, 0.3000], [1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]] }, { "label": "C", "data": [[1290115031727, 0.1200], [1289397678960, 0.1200], [1289397337040, 0.1200], [1289396577510, 0.1200], [1289395024607, 0.1200], [1288484550417, 0.1200], [1288482780457, 0.1200], [1288465846327, 0.1200], [1288465231287, 0.1200], [1288464658213, 0.1200], [1268470586860, 0.2000], [1268469423697, 0.2000], [1268468266277, 0.2000], [1268440631390, 0.2000], [1265984774793, 0.2000], [1265955732580, 0.2000]] }, { "label": "D", "data": [[1290114958773, 0.0500], [1289397467207, 0.0500], [1289396747243, 0.0500], [1289395166640, 0.0500]] }, { "label": "E", "data": [[1290114933540, 0.6500], [1289397579447, 0.6500], [1289397242333, 0.6500], [1289396486657, 0.6500], [1289395003947, 0.6500], [1288484568590, 0.6500], [1288482784747, 0.6500], [1288465893750, 0.6500], [1288465278320, 0.6500], [1288464705170, 0.6500], [1268470629373, 0.6500], [1268469467810, 0.6500], [1268468309513, 0.6500], [1268440674610, 0.6500], [1265984889857, 0.6500], [1265955775453, 0.6500]] }, { "label": "F", "data": [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}];

        var options = {
            legend: {
                show: true,
                container: $("#overviewLegend"),
                labelFormatter: function (label, series) {
                    var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
                    return cb;
                }
            },
            series: {
                points: { show: true },
                lines: { show: true }
            },
            grid: { hoverable: true },
            xaxis: {
                mode: "time",
                minTickSize: [1, "day"],
                max: new Date().getTime()
            },
            yaxis: {
                mode: "money",
                min: 0,
                tickDecimals: 2,
                tickFormatter: function (v, axis) { return "$" + v.toFixed(axis.tickDecimals) }

            }
        };

        var i = 0;
        $.each(results, function (key, val) {
            val.color = i;
            ++i;
        });

        var choiceContainer = $("#overviewLegend");

        function plotAccordingToChoices() {
            var data = [];
            alert('hi');

            choiceContainer.find("input:checked").each(function () {
                var key = $(this).attr("name");
                if (key && results[key])
                    data.push(results[key]);
            });

            $.plot($("#placeholder"), results, options);
            choiceContainer.find("input").click(plotAccordingToChoices);
        }



        var previousPoint = null;
        $("#placeholder").bind("plothover", function (event, pos, item) {
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));

            if (item) {
                if (previousPoint != item.datapoint) {
                    previousPoint = item.datapoint;

                    $("#tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

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

        plotAccordingToChoices();
    })



});

var jsonPath=“JsonPriceHistory/”+getParameterByName（“cardd”）
$（函数（）{
$.getJSON（jsonPath，函数（结果）{
结果=[{“标签”：“A”，“数据”：[[1290115114240,0.7000]，[1289396258877,0.7000]，[1289394738247,0.7000]，[1288482602563,0.7000]，[1288479321830,0.7000]，[1288464257267,0.7000]，[1288463414413,0.7000]，[1268440264933,1.0000]，[1268434766653,1.0000]，[1268059707567,1.0000]，[1265934340,1.0000]，[126593434340,1.0000]，[B]，[B]，[B]，“数据”：“标签”：“数据”：[[1290115102033,6.0000]，[1289395956947,6.0000]，[1289394743117,6.0000]，[1288482613967,6.0000]，[1288479332767,6.0000]，[1288464270420,6.0000]，[1288463427313,6.0000]，[12684402764113,6.0000]，[1268434778203,6.0000]，[1268059732683,6.0000]，[1265934545390,6.0000]，[1265934545390,6.0000]，[1265934545390,6.0000]，{，[12884343400,6.0000]，“标签”：“C”，“数据”：[1291503400,3000]，[，[1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]]}，{“label”：“C”，“data”：[[1290115031727,0.1200]，[1289397678960,0.1200]，[1289397337040,0.1200]，[1289396577510,0.1200]，[1289395024607,0.1200]，[12884550417,0.1200]，[1288482780457,0.1200]，[1288465846327,0.1200]，[1288465231287,0.1200]，[12884658213,0.1200]，[1268470586860,0.2000]，[12684690,3697]，[1268468266277,0.2000]，[1268440631390,0.2000]，[1265984774793,0.2000]，[1265955732580,0.2000]，{“标签”：“D”，“数据”：[129011495873,0.0500]，[1289397467207,0.0500]，[1289396747243,0.0500]，[1289395166640,0.0500]，{“标签”：“E”，“数据”：[12901149333540,0.6500]，[12893945747,128976500,0]。]，[1289396486657,0.6500]，[1289395003947,0.6500]，[1288484568590,0.6500]，[128848278477,0.6500]，[1288465893750,0.6500]，[1288465278320,0.6500]，[1288464705170,0.6500]，[1268469467810,0.6500]，[1268468309513,0.6500]，[1268468309513,0.6500]，[1268440674610,0.6500]，[126598488557]，[1265977555]，[126555]，“数据标签]，[1265955555]：: [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}];
变量选项={
图例：{
秀：没错，
容器：$（“#概览图例”），
labelFormatter：函数（标签，系列）{
var cb=“”+标签；
返回cb；
}
},
系列：{
要点：{show:true}，
行：{show:true}
},
网格：{hoverable:true}，
xaxis：{
模式：“时间”，
minTickSize:[1，“天”]，
最大值：新日期（）.getTime（）
},
亚克斯：{
模式：“金钱”，
分:0,，
小数点：2，
tickFormatter:函数（v，axis）{返回“$”+v.toFixed（axis.tickDecimals）}
}
};
var i=0；
$。每个（结果、功能（键、值）{
val.color=i；
++一,；
});
var choiceContainer=$（“#概览图例”）；
功能图根据目录（）绘制{
var数据=[]；
警报（“hi”）；
choiceContainer.find（“输入：选中”）。每个（函数（）{
var key=$（this.attr（“name”）；
if（键和结果[键]）
数据推送（结果[键]）；
});
$.plot（$（“#占位符”）、结果、选项）；
choiceContainer.find（“input”）。单击（根据选项绘制）；
}
var-previousPoint=null；
$（“#占位符”）.bind（“plothover”，函数（事件、位置、项目）{
$（“#x”）.text（pos.x.toFixed（2））；
$（“#y”）.text（pos.y.toFixed（2））；
如果（项目）{
if（上一个点！=item.datapoint）{
previousPoint=item.datapoint；
$（“#工具提示”）.remove（）；
var x=项。数据点[0]。固定（2），
y=item.datapoint[1].toFixed（2）；
显示工具提示（item.pageX、item.pageY、item.series.label+“$”+y）；
}
}
否则{
$（“#工具提示”）.remove（）；
previousPoint=null；
}
});
函数显示工具提示（x、y、内容）{
$（''+内容+''）.css({
位置：'绝对'，
显示：“无”，
顶部：y+5，
左：x+15，
边框：“1px实心#fdd”，
填充：“2px”，
“背景色”：“费用”，
不透明度：0.80
}).appendTo（“body”）.fadeIn（200）；
}
绘图依据目录（）；
})
});

---

您的代码有几个问题：

您正在使用的数据是以数组的形式出现的，而演示中显示的数据是一个对象。这里的区别很重要，因为您复制了他们的代码，但没有更改代码以适应这种情况。有问题的行是：

if (key && results[key])
    data.push(results[key]);

在

plotAccordingToChoices（）

函数中。

results[key]

在您的情况下不起作用，因为

key

需要是一个数值，但是

key

这里有一个字符串。解决方法是用一个for循环替换它，该循环在数组中搜索corr

for (var i = 0; i < results.length; i++) {
    if (results[i].label === key) {
        data.push(results[i]);
        return true;
    }
}

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

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

l = val.label;
var li = $('<li />').appendTo(choiceContainer);

$('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked" />').appendTo(li);
$('<label>', {
    text: l,
    'for': l
}).appendTo(li);

choiceContainer.find("input").change(plotAccordingToChoices);

$('.legendColorBox > div').each(function(i){
    $(this).clone().prependTo(choiceContainer.find("li").eq(i));
});

#overviewLegend li > div {
    display: inline-block;
    margin-right: 4px;
}