Javascript Flot图表：添加复选框'；s切换图表系列

设置完第一张图表后，我希望添加复选框来切换选择的系列

Flot在这里提供了一个示例：

现在，当我试图复制它时，我得到了一个错误：“数据集”是未定义的，有人能解释为什么吗

如果有人能告诉我为什么图例仍然显示在图形中，也会得到额外的分数

图表如下所示： 查看代码：

<div class="legend-container"></div>
<div class="graph-container">
<div id="placeholder" class="graph-placeholder"></div>
</div>
<p id="choices"></p>

复选框的Jquery

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


function plotAccordingToChoices() {
    var data = [];

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

    if (data.length > 0)
        $.plot($("#placeholder"), data, {
            yaxis: { min: 0 },
            xaxis: { tickDecimals: 0 }
        });
}   
plotAccordingToChoices();

//插入复选框
var choiceContainer=$（“#选项”）；
$。每个（数据集、函数（键、值）{
choiceContainer.append（“
”+
''
+val.label+“”）；
});
choiceContainer.find（“input”）。单击（根据选项绘制）；
功能图根据目录（）绘制{
var数据=[]；
choiceContainer.find（“输入：选中”）。每个（函数（）{
var key=$（this.attr（“name”）；
if（键和数据集[键]）
数据推送（数据集[键]）；
});
如果（data.length>0）
$.plot（$（“#占位符”），数据{
yaxis:{min:0}，
xaxis:{tickDecimals:0}
});
}   
绘图依据目录（）；

范围界定问题<代码>风险值数据集是

onDataReceived

函数的本地数据集。在该功能之外无法访问它。在

$（document）.ready（

处理程序）中将其初始化为null，应该使该范围内的所有内容都可以访问它

---

至于你的第二个问题，你需要向我们展示附加到这些div的CSS。我猜你的

图形容器是绝对定位的。另外，在你的选项中，你有两种不同的图例配置。删除第二个。谢谢回复标记，我试着在内部顶部更改/添加var datasets=null；
我的文档已经准备好了，但是它突然出现了“JavaScript运行时错误：无法获取未定义或空引用的属性'length'”.你和传奇人物tho对号入座，删除了第二个，一切都按照我的要求定位，Thanks@Baggerz，您的操作顺序都不稳定。在AJAX调用返回之前，您不会填充
数据集
变量。但是您尝试使用它插入复选框（
$。每个（数据集、函数（键、值）
）在那之前！
// insert checkboxes 
var choiceContainer = $("#choices");
$.each(datasets, function (key, val) {
    choiceContainer.append('<br/><input type="checkbox" name="' + key +
                           '" checked="checked" id="id' + key + '">' +
                           '<label for="id' + key + '">'
                            + val.label + '</label>');
});
choiceContainer.find("input").click(plotAccordingToChoices);


function plotAccordingToChoices() {
    var data = [];

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

    if (data.length > 0)
        $.plot($("#placeholder"), data, {
            yaxis: { min: 0 },
            xaxis: { tickDecimals: 0 }
        });
}   
plotAccordingToChoices();