Flot: как использовать onchange вместо onclick (флажок), чтобы отключить серию? - PullRequest
0 голосов
/ 21 февраля 2012

Я знаю, что можно использовать легенду для включения / выключения серии флотов, как это видно на этой странице.

В этом примере изменение кажется результатомсобытия click.

Я пытаюсь, чтобы это работало и при использовании события onchange.

Если я (добавлю и затем) нажму эту кнопку ...

<input type="button" value="Disable USA" onclick="document.getElementById('idusa').checked = false;">

... флажок снят, но график не перерисовывается.

Я пытался решить эту проблему двумя способами:

  1. Я добавил plotAccordingToChoices(); к onclick кнопки и
  2. Я изменил код choiceContainer.find("input").click(plotAccordingToChoices);: попытался использовать change вместо click.

Это не сработало.Есть идеи?

1 Ответ

0 голосов
/ 18 марта 2012

Это действительно сложная проблема, насколько я знаю (и я не знаю, насколько) изменение флажка с кнопки не вызовет событие изменения, но, поскольку вы используете функцию, вы можете просто измените атрибут, затем запустите функцию перерисовки. Я также изменил .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);

Теперь для вашей кнопки, я сделал это, чтобы переключить США:

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

EDIT: Вы можете использовать .trigger ('change'), чтобы вызвать событие 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> 

Вы могли бы немного изменить это и иметь кнопку для каждого флажка, если хотите. Я надеюсь, что это работает для вас.

...