jQuery Visualizeでグラフのデータ元である表を非表示にする方法

jQuery Visualizeの記事の5つめ。jQuery Visualizeは簡単に凝ったデザインのグラフを生成できるため非常に便利だが、table要素が必ず表示されてしまうため、表を表示したくない場合には使えない。

今回はその表(table要素)を非表示にする方法を紹介する。

非表示にする方法はいくつかあるが、今回はjQueryからCSSを指定する方法と、CSSを直接指定する方法の2つを紹介する。

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");
});

jQuery Visualizeのグラフのデータ元である表を非表示にする方法

すると、table要素が表示されなくなる。実際の表示はjQuery Visualize サンプル9(表を非表示にする)で確認できる。

処理を早くするために、メソッドチェーンを用いると以下のようになる。

メソッドチェーンを用いたサンプル – 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サンプル集

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery_visualize/1514/trackback/