jQuery Visualizeでグラフのデータ元である表を非表示にする方法
jQuery Visualizeの記事の５つめ。jQuery Visualizeは簡単に凝ったデザインのグラフを生成できるため非常に便利だが、table要素が必ず表示されてしまうため、表を表示したくない場合には使えない。
今回はその表（table要素）を非表示にする方法を紹介する。
非表示にする方法はいくつかあるが、今回はjQueryからCSSを指定する方法と、CSSを直接指定する方法の２つを紹介する。
HTML部分の編集 – table要素にclassを指定
まず、jQuery Visualizeで用いるtable以外を非表示にすることを避けるため、HTML部分を少し変更する。talbeのclassをgraphと指定する。
tableタグにclassを指定
<!-- 以上省略 --> </head> <body> <table class="graph"> <caption>2009 Employee Sales by Department</caption> <!-- 以下省略 -->
jQueryでCSSの設定
jQueryでCSSを設定するには、以下のようにする。3行目の意味が分からない方はjQueryの基本的な記述方法（セレクタと命令）を参考にしていただきたい。
jQueryからCSS指定 – jQueryのプログラム
$(function(){
$('table.graph').visualize({type: 'line'});
$('table.graph').css("display","none");
});
すると、table要素が表示されなくなる。実際の表示はjQuery Visualize サンプル９（表を非表示にする）で確認できる。
処理を早くするために、メソッドチェーンを用いると以下のようになる。
メソッドチェーンを用いたサンプル – jQueryのプログラム
$(function(){
$('table.graph').css("display","none").visualize({type: 'line'});
});
CSSで直接指定して、表を非表示にする方法
jQueryを用いなくても表（table要素）を非表示にすることができる。コードは以下のようになる。
CSSで直接指定 – CSSファイル内
table.graph {
display: none;
}
関連記事
jQuery Visualizeのグラフ要素の色の指定方法（colorsオプション）
jQuery Visualizeのグラフサイズの指定方法（width、heightオプション）
jQuery Visualizeサンプル集
2012年9月19日 8:50 PM｜カテゴリー：jQuery Visualize｜コメント (0)
コメントフィード
トラックバックURL： http://monopocket.jp/blog/jquery_visualize/1514/trackback/