私は dygraph を扱ってきましたが、ページ上の無数の可能性のある dygraph の表示のオンとオフを切り替えるチェック ボックスを備えた Web ページがうまく機能するようになりました。
ただし、値をすべてオンまたはオフに設定するボタンを追加したときに行き詰まりました。
私が従った基本的な例を見つけました: http://dygraphs.com/tests/color-visibility.htmlチェック ボックス 0-3 の ID 名を持っています。これは、チェック ボックスの ID を呼び出す必要がない限り、1 つのプロットでも複数のプロットでもうまく機能します。ID番号を繰り返してシステム全体を動作させました。
ただし、ボックスを自動的にチェックするボタンを追加すると、一意に識別されたチェックボックスが必要になります。そうしないと、最初のボックスセットのみをチェックおよびチェック解除します。次に、チェック ボックス ID の名前を変更すると、元の表示機能が機能しなくなります。
HTML:
<input type=checkbox id=0 onClick="change(this,plotname)" checked=true > A
<input type=checkbox id=1 onClick="change(this,plotname)" checked=true > B
<input type=checkbox id=2 onClick="change(this,plotname)" checked=true > C
<input type=checkbox id=3 onClick="change(this,plotname)" checked=true > D
<input id="all_On" type="button" value="All On" onclick="checkTheBoxes([true, true, true, true],<%= chartnumber %>)">
JS コード:
function change(element,name) {
name.setVisibility(element.id, element.checked);
}
function checkTheBoxes(tfarray,section) {
for (var j = 0;tfarray.length;j++){
document.getElementById(j).checked = tfarray[j]
document.getElementById(j).onclick()
//I have been using the section input to identify plots with the renamed IDs
}
}
問題は、変更関数を通過するときの「this」呼び出しにあると思います。Firebug でプローブすると、チェック ボックス番号 3 をクリックすると要素が入力番号 3 になり、これが機能します。ただし、ID の名前を plot2box3 のような名前に変更した場合、firebug 要素は input#plot2box3 であり、setVisibilty 関数は何をすべきかわからないと思います。
問題は、チェックボックスを一意に呼び出すことができる一方で、正しい要素を出力する「this」参照を維持するにはどうすればよいかということです。
ありがとう!