文字列をjqplotで使用する変数に変換したい

Question

###実現したいこと

• jqplotを使用してグラフを描画したい
• 凡例クリックではなくチェックボックスによって表示するグラフを切り替えたい
• チェックボックスの状態を取得して配列に格納し、それをそのままjqplotの系列データとして使用したい

###該当のソースコード

<input type="checkbox" value="cat">猫
<input type="checkbox" value="dog">犬
<input type="checkbox" value="pan">パンダ
<input type="checkbox" value="rab">うさぎ
<div id="graph"></div>

var cat = [403, 332, 385, 367];
var dog = [528, 355, 415, 452];
var pan = [220, 407, 131, 274];
var rab = [254, 260, 329, 323];
$(function() {
    $('[type=checkbox]:checked').each(function() {
        category.push($(this).val());
    });
});
$.jqplot('graph', category); 

categoryに格納された内容、たとえば["cat","dog","rab"]だったとしたら
これを[cat,dog,rab]として使用したく、if文で全選択パターンを列記して動かしている状態です。

if(category === "cat","dog","rab") {
 category = [cat,dog,rab];
}
if(category === "cat","dog","pan","rab") {
 category = [cat,dog,pan,rab];
}

もっとスマートに実現する方法はありますでしょうか。

Answer 1

・数値データを連想配列にまとめる
・チェックされた要素をmap処理してグラフ用データを作成

でやってみました。何か参考になる点があれば幸いです。

動作サンプル
https://jsfiddle.net/1jnLLoLb/2/

<label><input type="checkbox" value="cat">猫</label>
<label><input type="checkbox" value="dog">犬</label>
<label><input type="checkbox" value="pan">パンダ</label>
<label><input type="checkbox" value="rab">うさぎ</label>
<div id="graph"></div>

var values = {
  cat: [403, 332, 385, 367],
  dog: [528, 355, 415, 452],
  pan: [220, 407, 131, 274],
  rab: [254, 260, 329, 323]
};

$('[type=checkbox]').click(function() {
  var checkboxes = $('[type=checkbox]:checked');
  $('#graph').html('');

  if (! checkboxes.length) {
	  return;
  }

  var data = checkboxes.map(function() {
    var animal = $(this).val();
    return [values[animal]];
  }).get();
  $.jqplot('graph', data);
});

参考

jQuery.map(array, callback) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/utilities/jQuery.map/array,+callback/

Comments

[sunagimochan]

ご回答ありがとうございます。ご提示いただいたやり方で解決できそうです。
mapにこのような使い方があるとは知りませんでした。

Answer 2

if文で全選択パターンを列記して動かしている状態です。

具体的にどのようなパターンか教えてください。

以下の様なコードではダメでしょうか？
チェックボックスが切り替わる度に、グラフを更新しています。

//初期ロードの処理
$(function() {
	//チェックボックスにchangeイベントを設定する
	$("input[type='checkbox']").onchange(drawGraph);
});

/**
 * グラフを更新する
 */
function drawGraph() {
    $("input[type='checkbox']:checked").each(function() {
        category.push($(this).val());
    });
    $.jqplot('graph', category);
}

Comments

[sunagimochan]

回答ありがとうございます。if文の例を追加しました。情報不足で申し訳ございません。
ご提示いただいたscriptですと、categoryの内容を文字列と認識してしまって
データが入っていない状態になります。