Flot：如何使用onchange而不是onclick（复选框）来关闭系列？

Question

我知道可以使用图例来打开/关闭 flot 系列，如 此页面。

在该示例中，更改似乎是单击事件的结果。

我试图让它在使用 onchange 事件时也能工作。

如果我（添加然后）单击此按钮...

< /code>

...该复选框已被禁用，但图形未重新绘制。

我尝试通过两种方式解决此问题：

1. 我将 plotAccordingToChoices(); 添加到按钮的 onclick 中，并
2. 更改了 choiceContainer.find("input ").click(plotAccordingToChoices); 代码：尝试使用 change 而不是 click。

这不起作用。有什么想法吗？

Answer 1

这是一个非常棘手的问题，据我所知（而且我不太了解），从按钮更改复选框不会触发其更改事件，但由于您使用的是函数，因此只需更改属性即可，然后触发重绘函数。我还将 .click() 更改为 .change() 只是为了达到效果：

在 Flot 代码中，我向每个元素添加了一个类，并将该类设置为具有更改事件：

choiceContainer.append('<br/><input type="checkbox" name="'
 + key+'" checked="checked" id="id' + key + '" class="legend">' +
 '<label for="id' + key + '">' + val.label + '</label>');
$(".legend").change(plotAccordingToChoices);

现在对于您的按钮，我将其切换为 USA：

    $("#clicker").click( function(){
    if($("#idusa").is(":checked"))
        $("#idusa").attr('checked', false);
    else
        $("#idusa").attr('checked',true)
    plotAccordingToChoices();
    });

<强>编辑：
您可以使用 .trigger('change') 来触发更改事件。

    $("#clicker").click( function(){
    if($("#idusa").is(":checked"))
        $("#idusa").attr('checked', false);
    else
        $("#idusa").attr('checked',true)
    $("#idusa").trigger('change');
    });

最后，我将按钮更改为按钮：

<button id="clicker">Disable USA</button> 

如果需要，您可以稍微修改一下，并为每个复选框都有一个按钮。
我希望这对你有用。