jQuery Visualizeで様々な種類のグラフを作成

前回の記事(jQuery Visualizeで洗練されたデザインのグラフの作成)でjQuery Visualizeのダウンロードや基本的な使い方を紹介したので、今回は折れ線グラフ(2種類)、円グラフ、そしてデフォルトで設定されている棒グラフの指定方法を記載する。

jQuery Visualizeにおけるグラフ種類の指定方法

jQuery Visualizeにおけるグラフ種類の指定方法を記載するが、方法は非常に簡単。以下のコードはサンプル1の13~17行目を抽出したものである。前回の記事で説明した部分だが、この5行を書くことで棒グラフが生成される。このコードの3行目を変更することでグラフの種類を指定できる。

グラフ生成の実行部分

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize();
        });
</script>

折れ線グラフ(1つめ/2種類)の作成方法

折れ線グラフを作成するには、以下のように指定する。{type: ‘line’}を追加しただけ。

折れ線グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'line'});
        });
</script>

jQuery Visualizeの折れ線グラフ

実際にどのように表示されるかはjQuery Visualize サンプル2(折れ線グラフ1)で確認できる。

折れ線グラフ(2つめ/2種類)の作成方法

折れ線グラフは2種類用意されており、こちらは折れ線の下部に色が塗られたもの。これを作成するには、以下のように指定する。

折れ線グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'area'});
        });
</script>

jQuery Visualizeの折れ線グラフ2

実際の表示はjQuery Visualize サンプル3(折れ線グラフ2)で確認できる。

円グラフの作成方法

円グラフを作成するには、以下のように指定する。

円グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'pie'});
        });
</script>

jQuery Visualizeの円グラフ

実際の表示はjQuery Visualize サンプル4(円グラフ)で確認できる。

棒グラフの作成方法

棒グラフはデフォルトの設定となっているため敢えて指定する必要はないのだが、指定するには以下のようにする。

棒グラフの作成

<script type="text/javascript">
        jQuery(function(){
            jQuery('table').visualize({type: 'bar'});
        });
</script>

jQuery Visualizeの棒グラフ

実際の表示はjQuery Visualize サンプル5(棒グラフ)で確認できる。

以上のように様々なグラフを簡単に指定することができる。次回はより細かい指定をしていこうと思う。

関連記事

jQuery Visualizeで洗練されたデザインのグラフの作成
jQuery Visualizeのテーマの指定方法
jQuery Visualizeサンプル集

コメントを残す

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

This blog is kept spam free by WP-SpamFree.

コメントフィード

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